範圍：懸停將無法在Firefox中工作

Question

我不知道爲什麼，但：在我的代碼中，懸停在Firefox上不起作用。它在Chrome和Safari中運行良好，即使在IE中也表現良好。

我試過.over，但沒有任何改變。

的html代碼：

<div id="proekti"> 
     <article id="red1" class="sliki"> 
      <span> 
       <div class="text"> 
       <h3></h3> 
       </div> 
      </span> 
      <div></div> 

      <span> 
       <div class="text"> 
       <h3></h3> 
       </div> 
      </span> 
      <div></div> 

      <span> 
       <div class="text"> 
       <h3></h3> 
       </div> 
      </span> 
      <div></div> 

      <span> 
       <div class="text"> 
       <h3></h3> 
       </div> 
      </span> 
      <div></div> 
     </article> 
</div> 

CSS代碼：

#proekti .sliki > div { 
    width:25%; 
    display:inline; 
    float:left; 
    position:relative; 
    border:0; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

article.sliki > span { 
    width:25%; 
    height:100%; 
    display:inline-block; 
    position:absolute; 
    border:0; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    background: rgba(55,55,55,0.6); 
    color:#FFF; 
    opacity:0; 
    z-index:1000; 
} 

article.sliki > span:hover { 
    transition:all 1s ease-out; 
    -webkit-transition:all 1s ease-out; 
    -moz-transition:all 1s ease-out; 
    -o-transition:all 1s ease-out; 
    opacity:1; 
} 

Answer 1

你的代碼是錯誤的。 SPAN是一個INLINE元素，但是您在其中放置了DIV（塊元素）。這是無效的。您只能在另一個內聯元素內使用內聯元素。

這不是很好的解決方案，但是：如果您將{display：block;}屬性添加到span（article.sliki> span），則hover將爲您工作。