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を試してみたらどうでしょうか？ –

Paulie_Dが言ったことは、最小限の例を作ることです。私は最小限の例を作ることであなたの問題を並べ替えることができると確信しています。これは私のブラウザではCSSの移行が '.cd-img-overlay'の代わりに' .cd-member-info'に起こるためです。私はあなたがスタイルシートに間違ったセレクタを持っていると思います。 – grochmal

こんにちは、オーバーレイの不透明度を1に変更すると、あなたはそこにいます。 :)現在、あなたのホバークラスのためにopacity：0に設定されています。

出典

2016-06-12 19:04:30

はあなたのコードにこれを追加ANそれが動作します..あなたは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に変更していません。それが問題なのです。作業URLにある次のコードを使用します。

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

出典

2016-06-12 19:07:21 SESN

CSSオーバーレイ効果がホバーに作用しない

答えて

関連する問題