0

我有一种方法可以解决我网站导航中的问题http://204.197.252.143/~paterson/，当我将链接（li 元素）悬停时，背景将设置为灰色，并且前一个元素的背景图像（十字符号）也将隐藏。我的问题是，有没有另一种方法可以动态地制作它？这是我的代码。任何帮助表示赞赏。

 <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

1

就像@juno 所说.. 为什么不使用 css？例如：

li:hover{ attributes to change }
于 2013-09-04T22:56:24.193 回答
0

稍微调整一下您的 html，使背景图像出现在 li 的左侧。就像是：

# 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，这样的东西就可以工作。

编辑:: 当你启动时，确保你的图像路径是相对于 CSS 文档的 - url(../img/cross.png) - 而不是硬编码到 IP 地址。

于 2013-09-04T22:59:44.360 回答
0

您可以在 jQuery 中使用.hover()和.prev()来执行此操作。

这是代码：

<script>
$(document).ready(function () {
     $("li.menu").hover(function () {
          $(this).prev().css("background", "transparent");
        }, function(){
          $(this).prev().css("background", "url(http://site.com/~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
     });
});
</script>
于 2013-09-04T23:06:18.093 回答