The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Default state needs style for :hover to work – explanation needed!

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #171820

    I have ‘resolved’ this issue but It’d be great if someone could explain what the problem was and why this fixed it so I know for future.

    The #header of my site is position: fixed; with a value of top: 0;. When the page is scrolled I use a waypoints plugin ( to add a class of .sticky on the #header element and then in the CSS set the value top: -65px; – this leaves about 20 pixels worth of the header overhanging the page (as intended). Then on #header.sticky:hover I set top: 0; to return the header to its original position. When the mouse leaves the header area it returns to its offscreen position.

    This works great …..but not in IE8.

    To cut a long strong short, in IE8 and below on hovering over the header nothing happened. It wouldn’t move/display at all.

    I managed to get this working by applying a style to #header:hover. I’ve since set this to top: 0; so it makes sense but it would actually work if I applied background: #f00; for example – which makes no sense?

    Any someone explain this? Why IE8 needed a style on the default state as well as the hover?


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.