Pseudo class :hover does not work in IE7

Asked 27/9, 2008 at 9:23 Answered 11/11, 2010 at 9:15

I've got such a simple code:

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

and this CSS:

.div1{
  position: relative;
}
.div1 .div3 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 250px;
  display: none;
}
.div1:hover .div3 {
  display: block;
}
.div2{
  width: 200px;
  height: 30px;
  background: red;
}
.div4 {
  background-color: green;
  color: #000;  
}
.div5 {}

The problem is: When I move the cursor from .div2 to .div3 (.div3 should stay visible because it's the child of .div1) then the hover is disabled. I'm testing it in IE7, in FF it works fine. What am I doing wrong? I've also realized that when i remove .div5 tag than it's working. Any ideas?

Handle answered 27/9, 2008 at 9:23 Comment(1)

Note that it may be the case that you need to also add .div3:hover{ display: block } otherwise when you move your mouse over the child element .div3 the parent will lose its pseudo class :hover. This depends on your implementation however. – Shorttempered 23/10, 2009 at 15:20

IE7 won't allow you to apply :hover pseudo-classes to non-anchor elements unless you explicitly specify a doctype. Just add a doctype declaration to your page and it should work perfectly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

More on IE7/quirks mode can be found on this blog post.

Disenthrall answered 27/9, 2008 at 22:26 Comment(0)

I found that this solution worked better and was a bit cleaner:

    <style type="text/css">
        * {
            color: #fff;
        }
        .wrapper {

        }

        .trigger {
            background: #223;
        }

        .appear {
            background: #334;
            display: none;
        }

        .trigger:hover .appear {
            display: block;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="trigger">
            <p>This is the trigger for the hover element.</p>
            <div class="appear">
                <p>I'm <strong>alive!</strong></p>
            </div>
        </div>
    </div>

</body>

pastebin.

Kampmann answered 27/9, 2008 at 9:31 Comment(3)

This is “cleaner” than specifying a DOCTYPE? How so? – Flak 3/6, 2012 at 17:20

@Flak Note that this was posted 14 hours before the DOCTYPE answer, which I did not know about at the time :) – Kampmann 3/6, 2012 at 22:26

Ah, my bad, I should have looked at the dates to figure out the correct context. – Flak 4/6, 2012 at 17:3

Could it be the double margin problem? I did an display: inline-block when it happened for a li http://www.positioniseverything.net/explorer/doubled-margin.html

Hurley answered 11/11, 2010 at 9:15 Comment(0)

Recommended topics

Hot tags