2

子アイテムにカーソルを合わせると親divの背景が変わるナビゲーション メニューを作成しようとしています。li実際には、親の背景を移動したいだけです。

これが私のコードです：

<div id="headerNav">
    <li class="navHome"><a href="index.php">Home</a></li>
    <li class="navServices"><a href="services.php">Services</a></li>
    <li class="navFaq"><a href="faq.php">FAQ</a></li>
    <li class="navGallery"><a href="gallery.php">Gallery</a></li>
    <li class="navContact"><a href="contact-us.php">Contact</a></li>
</div>

だから、私は#headerNav表示されているデフォルトの背景を持っています。サービスにカーソルを合わせると、#headerNav背景画像を 75px 上に移動します。#headerNavFAQにカーソルを合わせると、背景画像を150px上に移動したいなど

誰でも私を助けることができますか？

4

3 に答える 3

3

li要素はリスト アイテムであることを考慮してulくださいdiv。有効な HTML マークアップを想像すると、次のようなものを使用しbackground-positionて親要素を操作できます。index()ロジックをハードコーディングしない方法を使用しました。

$("#headerNav > li").hover(function() {
    var pos = "0 -" + ($(this).index() * 75) + "px";
    $(this).parent().css("background-position", pos);
}, function() {
    $(this).parent().css("background-position", "0 0");
});

デモ: http://jsfiddle.net/rFhtP/

于 2012-05-27T11:59:23.400 に答える
0

移動するピクセル数を決定するliにカスタム属性を配置し、アイテムにカーソルを合わせたときにjqueryを使用して、属性値を取得し、その親にアクセスして、この属性を使用して背景位置を設定することで、これを行うことができます。それはスケーラブルなメニューと堅牢になります

$("#headerNav li").hover(function() {
    $(this).parent().css("background-position", $(this).attr("CustomAttributeName"));
})
于 2012-05-27T12:01:11.057 に答える
0

hover()jQuery は、関数を使用してこれを簡単に行うことができます。

$("li").hover(function() {
    $(this.parentNode).addClass(this.className);
}, function() {
    $(this.parentNode).removeClass(this.className);
});

jsFiddle: http://jsfiddle.net/Zy68z/

于 2012-05-27T12:02:24.130 に答える