3

我希望将悬停功能与当前选定的项目功能结合起来进行导航。页面首次加载时，悬停功能就在那里；但是，在选择一个项目（并运行脚本）后，悬停 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>
4

5 回答 5

4

因为您正在li使用 jQuery 分配 's的样式属性

$("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-colorand ，这将使样式优先colorlili:hover

于 2013-09-09T09:47:15.960 回答
0

只需!important为背景颜色添加 li:hover 选择器。

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

演示

于 2013-09-09T09:47:44.163 回答
0

检查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'
                });
            }
于 2013-09-09T09:50:36.753 回答
0

最好的方法，更轻：

$("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");
    });
});

看看这个小提琴

于 2013-09-09T10:03:38.327 回答
0

我认为这要简单得多：

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/

于 2013-09-09T10:06:21.023 回答