1

隣り合った3つの製品ブロックがあります。それぞれに画像と名前があります。テキストにカーソルを合わせると、画像の下部に境界線が表示されます。画像にカーソルを合わせるとスタイルが設定されていますが、画像にカーソルを合わせると機能しますが、テキストにカーソルを合わせると機能しません。

これがjsfiddleです。

また、私が持っているHTML：

<div class="container-product-row">
    <ul class="variations">
        <li>
            <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Cuff</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Dome</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Gladiator</h2></a>
        </li>
    </ul>  
</div> <!-- container product row -->​

CSS：

.container-product-row {
   margin-bottom:-20px;
}

.variations li {
    margin:10px; 
    width:183px
}

.variations li a, a:visited {
    display: block; 
    color:#000000; 
    text-decoration:none
}

.variations li a:hover { 
    color:#ff4baa;
}

.variations li a img {
    display: block; 
}

.variations li a img:hover {
    border-bottom:5px solid #ff4baa;
}

.variations {
    display: block;  
}

.variations > li {
    display: inline-block;
    vertical-align: top;
}

h2 {
    font-family: 'Arapey', serif; 
    font-weight:400; 
    font-size:12pt; 
    padding: 5px 10px 5px 5px;     
    font-style:italic; 
    font-weight:400
}
4

3 に答える 3

4

テキストはDOM内の画像の後に来るため、これを行う唯一の方法は:hover、テキストと画像の親である。を設定することliです。

ここでデモを見ることができます

または、HTMLを再配置してから、兄弟セレクターを使用することもできます。

于 2012-12-19T11:27:43.487 に答える
2

次のスタイルに変更します。

.variations li:hover a img {
    border-bottom: 5px solid #ff4baa;
}

デモ：http： //jsfiddle.net/dCNKm/5/

于 2012-12-19T11:27:16.647 に答える
2

特定の要素ではなく、親要素に属性を持つホバースタイルを適用する必要があります。したがって、この：

.variations li a img:hover { border-bottom:5px solid #ff4baa; }

これになる可能性があります：

.variations li:hover a img { border-bottom:5px solid #ff4baa; }

また、テキスト用に書き直すことも検討してください。

于 2012-12-19T11:27:27.083 に答える