Question

我希望将悬停功能与当前选定的项目功能结合使用以进行导航。页面首次加载时会出现悬停功能;但是，在选择一个项目（并运行脚本）后，悬停css似乎已被删除，我不知道为什么。这是我的文件（jsfiddle）：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <link rel="shortcut icon" href="/favicon.ico">
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
      <title>TITLE</title>
      <style>
         ul {
            list-style: none;
         }

         li {
            background-color: orange;
            color: white;
            float: left;
            padding: 10px;
         }

         li:hover {
            background-color: grey;
            color: black;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>one</li>
         <li>two</li>
         <li>three</li>
         <li>four</li>
         <li>five</li>
      </ul>

      <script type="text/javascript">
         $("li").click(function() {
            $("li").each(function() {
               $(this).css({'background-color' : 'orange',      
                            'color' : 'white'});      
            });
            setHighlighted(this);
         });

         var setHighlighted = function(ref) {
            $(ref).css({'background-color' : 'grey',
                        'color' : 'black'
            });
         }
</script>
   </body>
</html>

Answer 1

因为您使用jQuery

分配li的样式属性

$("li").each(function () {
    $(this).css({
        'background-color': 'orange',
            'color': 'white'
    });
});

这会写入取代

的元素的样式标记

 li:hover {
     background-color: grey;
     color: black;
 }

式

将您的代码更改为

$("li").click(function () {
    $("li").each(function () {
        $(this).css({
            'background-color': '',
                'color': ''
        });
    });
    setHighlighted(this);
});

JSFIDDLE

这将从background-color元素的样式属性中删除color和li，这将使li:hover成为优先的样式

Answer 2

只需在li：hover选择器上添加!important for background-color。

li:hover {
            background-color: grey !important;
            color: black;
         }

demo

Answer 3

检查JS小提琴

http://jsfiddle.net/BxPW3/4/

$("li").click(function() {
               /* $("li").each(function() {*/
                    $(this).css({
                        'background-color': 'orange',
                            'color': 'white'
                    });
              /*  });*/
                setHighlighted(this);
            });

            var setHighlighted = function(ref) {
                $(ref).css({
                    'background-color': 'grey',
                        'color': 'black'
                });
            }

Answer 4

最好的方法，打火机：

$("li").each(function () {
    $(this).click(function () {
       //Your function
    });
});

现在，要设置“有效”状态，您应该添加一个类：

.markup{ 
    background-color: grey;
    color: black;  
}

在删除现有的活动LI后，将此类设置为正确的LI：

$("li").each(function () {
    $(this).click(function () {
        $(".markup").removeClass("markup")
        $(this).addClass("markup");
    });
});

查看this fiddle

Answer 5

我认为这更简单：

li {
    padding: 10px;
    float: left;
    background-color: orange;
    color: white;
}

li:hover,
li.on {
    background-color: gray;
    color: black;
}

另外，它只为CSS留下样式：

$('ul').on('click', 'li', function(ev) {
    $(ev.delegateTarget).find('.on').removeClass('on');
    $(this).addClass('on');
});

看到这个小提琴：jsfiddle.net/rG4a5/

为什么我的悬停css被jQuery删除？

5 个答案: