Bug Tracker

#13012 closed bug (patchwelcome)

Opened December 06, 2012 06:36PM UTC

Closed December 29, 2012 04:54PM UTC

Last modified January 02, 2013 03:44PM UTC

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

Reported by: shauna@shaunagordon.com 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)

Attachments (0)
Change History (3)

Changed December 06, 2012 06:43PM UTC by shauna@shaunagordon.com comment:1

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)

Changed December 29, 2012 04:54PM UTC by dmethvin comment:2

resolution: → patchwelcome
status: new → closed

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".

Changed January 02, 2013 03:44PM UTC by shauna@shaunagordon.com comment:3

Replying to [comment:2 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?