logo标签列表

为什么我的hover css被jQuery移除了？

javascriptjquerycss
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>
我没有精力写出完整的答案，但使用类可以避免许多麻烦，同时获得更干净、更合理的代码。Fiddle：http://jsfiddle.net/BxPW3/7/ - Andreas Eriksson
1
只是一个样式提示：最好和更清晰的方法是使用 JQuery 添加一个 class，并在 CSS 中声明该类的样式，而不是直接使用 JQuery 设置 CSS 样式。 - Dave Everitt
5个回答
4
因为你正在使用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);
});

这将从 li 元素的样式属性中移除 background-color 和 color，使得 li:hover 的样式优先生效。

JSFIDDLE

0
只需在li:hover选择器上添加!important以改变background-color。
li:hover {
            background-color: grey !important;
            color: black;
         }

演示

0

请检查JS fiddle

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'
                });
            }
当选择另一个链接时，链接将保持高亮显示，无法正常工作。 - DGS
你在评论之前有检查过这个fiddle吗？ - Arun Bertil
是的，我有，并且它的工作方式并不像预期的那样。任何时候只能选择一个项目。 - DGS
0

最好的方法，也是更轻量级的：

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

现在，要设置一个“active”语句，您应该添加一个类：
.markup{ 
    background-color: grey;
    color: black;  
}

将这个类设置为右侧的LI，在删除现有的活动LI后：
$("li").each(function () {
    $(this).click(function () {
        $(".markup").removeClass("markup")
        $(this).addClass("markup");
    });
});

看一下这个代码片段

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/

糟糕！重复了。没有看到@EdenSource的答案。抱歉。 - adjogima
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接