Home/ Questions/Q 45627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:50:20+00:00

I’ve got such a simple code: <div class=div1> <div class=div2>Foo</div> <div class=div3> <div class=div4>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0