レスポンシブな画像ギャラリーでキャプションが正しく切り替わらない

Question

画像の下にフェードインするキャプションがあります。デバッグ中に私はdiv.descがどこにあるべきか、どこに表示されるべきであるかを知っていますが、話すための遷移はありません。

は、これはよく道div.itemべきhoverの構文が正しくないことが考えられます。

誰かが私が間違っていることを手伝うことができますか？

CSS：私のHTMLと

div.img { 
    border: 1px solid #ccc; 
} 

div.img:hover { 
    border: 1px solid #777; 
} 

div.img img { 
    width: 100%; 
    height: auto; 
} 

div.desc { 
    padding: 15px; 
    text-align: center; 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 
    opacity: 0; 
    bottom: 0; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
} 
a:hover .item { 
    opacity: 1; 
    left: 0; 
    z-index: 500; 
} 

：

<div class="responsive"> 
    <div class="img"> 
    <a target="_blank" href="img_fjords.jpg"> 
     <img src="/images/demo.jpg" alt="Find" width="535" height="535"> 
    </a> 
    <div class="desc"><div class="item">This is the caption</div></div> 
    </div> 
</div> 

Answer 1

それはあなたがいない、.descに不透明度を移行しようとしているように見えますか？ もしそうなら、あなたの:hoverコードで間違った要素を選択したために機能しないのです。あなたの代わりにあなたが持っているものの本を書きたいでしょう：

a:hover + .desc

理由は.itemも.descどちらがあなたのアンカータグの子であるということです。 .descはそれに隣接するシンリングであり、CSSで+を使用するとそれらが選択されます。また、遷移するプロパティを持つ要素を遷移させたいとします（この場合は、最初に不透明度が変更されたのは.descのみです）。