views:

1917

answers:

2

Hi all,

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?

A: 

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.

Ross
+6  A: 

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"&gt;

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

Justin Poliey