如何使 li 元素悬停在动态

How to make dynamic the li element hover

本文关键字：动态 悬停 元素 何使 li      更新时间：2023-09-26

>我有一种方法可以解决我在网站导航中的问题 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>

就像@juno说的那样......为什么不使用CSS？例如：

li:hover{ attributes to change }

你可以在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>
稍微

调整一下你的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：： 当您启动时，请确保您的图像路径相对于 CSS 文档 - url（../img/cross.png） - 而不是硬编码到 IP 地址。

相关文章：