懸停不起作用CSS疊加效果

有沒有人知道爲什麼我的.cd-img-overlay類不能在我懸停在列表項上時工作？懸停不起作用CSS疊加效果

CSS：

#cd-team .cd-img-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(92, 75, 81, 0.9); 
    opacity: 0; 
    border-radius: .25em .25em 0 0; 
    -webkit-transition: opacity 0.3s; 
    -moz-transition: opacity 0.3s; 
    transition: opacity 0.3s; 
}

HTML：

<li> 
    <a href="#0" data-type="member-1"> 
     <figure> 
      <img src="images/bruce.jpg" alt="Team member 1" /> 
      <div class="cd-img-overlay"><span>View Bio</span></div> 
     </figure> 
     <div class="cd-member-info"> 
      John Smith <span>Founder &amp; President</span> 
     </div> 
    </a> 
</li>

我似乎無法得到那個覆蓋類像SH工作當你將鼠標懸停在一個團隊成員上時：https://codyhouse.co/demo/side-team-member-bio/index.html

來源

2016-06-12 redshift

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。雖然您提供了[**鏈接到網站或示例**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶是沒有價值的。 –

如果您嘗試＃cd-team .cd-img-overlay：hover {？ –

Paulie_D說，試着創造一個最小的例子。我甚至會打賭，創建最簡單的例子會對你的問題進行分類。這是因爲在我的瀏覽器中，CSS轉換髮生在'.cd-member-info'而不是'.cd-img-overlay'上。我敢打賭，你在樣式表中有錯誤的選擇器。 – grochmal

嗨，改變覆蓋層的不透明度爲1，你就在那裏。 :)它目前設置爲opacity：0爲您的懸停類。

來源

2016-06-12 19:04:30

添加到您的代碼將工作..它只是因爲懸停你不改變不透明度爲1

#cd-team li:hover .cd-img-overlay { 
    opacity: 1; 
}

來源

2016-06-12 19:06:03

你有一個懸停狀態，不透明度改爲1？例如：

a:hover .cd-img-overlay { opacity: 1; }

來源

2016-06-12 19:06:04 jafaircl

懸停時，您不會將不透明度更改爲1。這就是問題所在。使用工作網址中存在的以下代碼。

.no-touch #cd-team li:hover .cd-img-overlay { opacity: 1; }

來源

2016-06-12 19:07:21 SESN

懸停不起作用CSS疊加效果

回答

相關問題