僞類：懸停不會在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情況：懸停{顯示：塊}否則，當你將鼠標移到該子元素.div3父項將失去其僞類：懸停。這取決於你的實施。 – moorej 2009-10-23 15:20:26

IE7不允許您將:hover僞類應用於非定位元素，除非您明確指定了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

難道是雙邊緣問題？我做了一個顯示：inline-block的時候發生了裏 http://www.positioniseverything.net/explorer/doubled-margin.html

來源

2010-11-11 09:15:39

僞類：懸停不會在IE7

回答

相關問題