0

Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.

I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..

they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..

However, on Firefox they do appear to get triggered

I have had a look at people having issues with this to do with jQuery hover events not firing: here

If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here: http://jsfiddle.net/Lm2fa/1/

EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse

EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)

Community
  • 1
  • 1
haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • Seems to be working in the fiddle, but I see some JS. I'm not sure what you mean. –  Oct 29 '13 at 00:50
  • @shaan singh, have edited with a use case, please dont move your mouse when you are opening and closing (you should only see the animation on click), otherwise please provide browser and os details :) also the desire for no JS is more for to keep things lightweight than anything.. – haxxxton Oct 29 '13 at 00:57

0 Answers0