jQuery Forum

1) "To wich li the :before belongs?

Thanks.

Since the pseudo element is considered as part of the element it is attached to, hovering over it will trigger mouse enter and leave events on that element.

http://jsfiddle.net/kjA8A/ 

-- Kevin

Any way that gets the pseudo-element to "protrude?" (sorry for my lack of words) as the graphic above will do it.

Well… but if jQuery can target them, there must be a way to exclude it, even if that means to add an extra mouseover to the :before to temporarily remove the li's, or manually trigger the li's mouseout.

Regardless of the element not being a real element "and therefore not exist in the DOM", I'm sure jQuery doesn't think  $('#menu li') == $('#menu li:before')

Probably you are jumping ahead to where the problem will be and I'm still far behind, but if they are not the same thing, and both of them can be target, there must be something I can do. Probably not the way I'm asking because of the reason of my question: I'm not a jQuery expert ;)

I'm not using jQuery.

I bound an event to the div, however clicking on the pseudo element triggers the click event. You may be able to get around this by comparing the x,y position of the click event to the width/height/position of the clicked element to ensure that the click actually happened within the element rather than on a pseudo element before or after it. Seems like a lot of trouble to go through though.

-- Kevin

With that fiddle you are demonstrating that the pseudo-element gets the click too, which I know. That's why I used mouseover and not mouseenter, because I thought I could exclude it later.

Never mind. If anyone knows a hack to "exclude" the pseudo-element from triggering the event, I'd appreciate it. If not, I'll use one of the following alternative approaches.

a) make sure the LI is always in front of everything with z-index (no user interaction with the content anyway) and using mouseenter

b) using mouseenter on every (or only some) children of LI and burst the bubble for every element that tries to bubble-up the event.

c) exit short the functions every time the pseudo-element is mouseenter'd… and re-apply the mouseenter when I rollout off it.

your are a genius!

My li's are absolutely positioned and animated, and fixing all the animations and calculations is crazier than just adding the mouseover to the "a" inside and passing all the current animations to its parent.

Thanks anyway for the html tip, I thought there was nothing new there.