Псевдо класс: парить не работает в IE7

У меня такой простой код:Псевдо класс: парить не работает в IE7

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

и этот 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 {}

Проблема: Когда я переместить курсор из .div2 до .div3 (.div3 должен оставаться видимым, потому что это ребенок .div1), тогда наведение отключено. Я тестирую его в IE7, в FF он отлично работает. Что я делаю не так? Я также понял, что когда я удаляю тег .div5, чем он работает. Есть идеи?

источник

2008-09-27 Lukas

Обратите внимание, что это может быть так, что вам нужно также добавить .div3: hover {display: block}, в противном случае, когда вы наводите мышь на дочерний элемент .div3 родитель потеряет свой псевдокласс: hover. Однако это зависит от вашей реализации. – moorej 2009-10-23 15:20:26

IE7 не позволит вам применять псевдоклассы :hover к элементам без привязки, если вы явно не указали тип doctype. Просто добавьте объявление doctype на свою страницу, и оно должно работать отлично.

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

Больше на IE7/режим совместимости можно найти на this blog post.

источник

2008-09-27 22:26:02

Я обнаружил, что это решение работало лучше, и было немного чище:

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

источник

2008-09-27 09:31:28 Ross

Это «чище», чем указание DOCTYPE? Как так? – mkoistinen 2012-06-03 17:20:40

Может быть проблема с двойным краем? Я сделал дисплей: встроенный блок, когда это произошло для li http://www.positioniseverything.net/explorer/doubled-margin.html

источник

2010-11-11 09:15:39

Псевдо класс: парить не работает в IE7

ответ

Смежные вопросы