0

サイトのナビゲーションで問題を解決する方法がありましhttp://204.197.252.143/~paterson/た。リンク (li-element) にカーソルを合わせると、背景が灰色に設定され、前の要素の背景画像 (十字記号) も非表示になります。私の質問は、それを動的にする別の方法はありますか? これは私のコードです。どんな助けでも大歓迎です。

 <script>
        $(document).ready(function () {
        $("li#menu-item-21").hover(function () {
        $("li#menu-item-23").css("background", "transparent");
        });
        $("li#menu-item-21").mouseleave(function () {
        $("li#menu-item-23").css("background", "url(http://site.com/
        ~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
         });
    </script>

    <script>
        $(document).ready(function () {
        $("li#menu-item-23").hover(function () {
         $("li#menu-item-22").css("background", "transparent");
        });
        $("li#menu-item-23").mouseleave(function () {
        $("li#menu-item-22").css("background", "url(http://site.com/
        ~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
        });
    </script>

    <script>
        $(document).ready(function () {
        $("li#menu-item-23").hover(function () {
        $("li#menu-item-22").css("background", "transparent");
        });
        $("li#menu-item-23").mouseleave(function () {
        $("li#menu-item-22").css("background", "url(http://site.com/
        ~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
    });</script>

    <script>
        $(document).ready(function () {
        $("li#menu-item-20").hover(function () {
        $("li#menu-item-96").css("background", "transparent");
        });
        $("li#menu-item-20").mouseleave(function () {
        $("li#menu-item-96").css("background", "url(http://site.com/
        ~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
    });</script>

    <script>
        $(document).ready(function () {
        $("li#menu-item-19").hover(function () {
        $("li#menu-item-20").css("background", "transparent");
        });
        $("li#menu-item-19").mouseleave(function () {
       $("li#menu-item-20").css("background", "url(http://site.com/
       ~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
    });</script>

    <script>
        $(document).ready(function () {
        $("li#menu-item-96").hover(function () {
        $("li#menu-item-21").css("background", "transparent");
        });

        $("li#menu-item-96").mouseleave(function () {
        $("li#menu-item-21").css("background", "url(http://site.com/~paterson/
         wp-content/themes/patersons/img/cross.png) no-repeat right");
        });
    });
    </script>
4

3 に答える 3

0

背景画像が左側に表示されるように、html を少し修正します。何かのようなもの：

# put the background image on the left of the LI's
.nav-menu li { background: url("http://204.197.252.143/~paterson/wp-content/themes/patersons/img/cross.png") no-repeat center left;

# remove the background image from the first element
.nav-menu li:first-child { background: none }

#when you're hovering, remove the background
.nav-menu li:hover { background: transparent; }

そのようなものは、JS がなくても機能します。

edit:: 起動するときは、画像パスが IP アドレスにハードコーディングするのではなく、CSS ドキュメント (url(../img/cross.png)) からの相対パスであることを確認してください。

于 2013-09-04T22:59:44.360 に答える