0

ユーザーがドロップダウンにカーソルを合わせている間、メインのナビゲーション項目をアクティブに保とうとしています。ただし、ターゲットを絞るほど簡単ではありませんli:hover{}

コンテンツ管理上の理由から、ナビゲーションのイメージ スプライトは CSS ではなく HTML にあります。HTMLは次のとおりです。

<div class="nav">
<ul>
    <li class="dropdown"><a href="#"><span class="clip"><img src="css/img/nav-products.png" alt="nav-products" width="81" height="243"></span><span class="link">Our Products</span></a>
        <ul>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Laptops</span></a></li>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Tablets</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span class="clip"><img src="css/img/nav-buy.png" alt="nav-buy" width="81" height="162"></span><span class="link">Where to Buy</span></a></li>
</ul>
</div>

CSSは次のとおりです。

.nav ul li a{padding: 0px; height: 81px; width: 81px;}
.nav ul li a span.clip{height: 81px; width: 81px; display: block; overflow: hidden;}
.nav ul li a span.clip img{position: relative; top: -81px;}
.nav ul li a:hover span.clip img{position: relative; top: 0px;}
.nav ul li.dropdown a:hover span.clip img{position: relative; top: -162px;}

ユーザーがドロップダウンにカーソルを合わせているときに img をターゲットにする方法はありますか? ユーザーがカーソルを合わせているので、 ?.nav ul li.dropdown ul li:hoverのコードを調整する必要があります。span.clip img

ありがとう！ジェイソン

4

2 に答える 2

0

これを試して：

.nav ul li.dropdown:hover span.clip img {
    // styles here
}
于 2012-12-19T18:36:58.157 に答える
0

画像がどのように見えるかを確認するために、このライブの例を見る機会があれば. おそらく `nav ul > li.dropdown a:hover span.clip のように、子コンビネータを使用する必要があると思いますが、実際の例がないと難しいです。

于 2012-12-18T16:16:23.657 に答える