Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#13012 closed bug (patchwelcome)

Animation on descendent element does not work on first mouseover with .hover()

Reported by: shauna@… Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.8.3
Keywords: Cc:
Blocked by: Blocking:

Description

When attempting to animate a descendent element using the .hover() event on an ancestor, the animation does not occur the first time you hover the parent element if ":hover { display: block; }" is in the CSS. The animation works as intended on subsequent mouseovers, and if you remove "display: block" from the CSS.

http://jsfiddle.net/bFNGZ/7/ (great-grandchild) http://jsfiddle.net/bFNGZ/8/ (grandchild) http://jsfiddle.net/bFNGZ/9/ (child)

Change History (3)

comment:1 Changed 7 years ago by shauna@…

I just noticed that jsfiddle runs 1.8.2, while the tracker reports 1.8.3 as the latest. Just to be thorough, below are the same fiddles, but with 1.8.3 included to demonstrate that the issue still exists:

http://jsfiddle.net/bFNGZ/10/ (great-grandchild) http://jsfiddle.net/bFNGZ/13/ (grandchild) http://jsfiddle.net/bFNGZ/11/ (child)

comment:2 Changed 7 years ago by dmethvin

Resolution: patchwelcome
Status: newclosed

This just seems like a bad assumption to make. The :hover CSS pseudo, controlled by the browser, is conflicting with the .hover() method, controlled by JavaScript. Go one way or the other.

I'll mark this patchwelcome in case someone has a simple fix, but my fix would be "don't do this".

comment:3 in reply to:  2 Changed 7 years ago by shauna@…

Replying to dmethvin:

This just seems like a bad assumption to make. The :hover CSS pseudo, controlled by the browser, is conflicting with the .hover() method, controlled by JavaScript. Go one way or the other.

I'll mark this patchwelcome in case someone has a simple fix, but my fix would be "don't do this".

It seems to go against modern JavaScript (and web development) best practices to require not having a CSS fallback (in this case, the ability to show an element, regardless of whether JS is enabled) in order to have a certain effect.

How is allowing CSS to control the display value, while having JavaScript simply animate that transition, a "bad assumption"?

Additionally, how is it a "bad assumption" that the above code should work the first time, when it works just fine after the first time, especially when similar effects work 100% of the time?

Note: See TracTickets for help on using tickets.