Question

我在我的网站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>

Answer 1

像@juno一样说..为什么不用css？例如：

li:hover{ attributes to change }

Answer 2

稍微调整你的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的情况下工作。

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

Answer 3

您可以在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>

如何动态li元素悬停

3 个答案: