Question

这是我的代码的一些简化，但我认为该示例有效。基本上，我想要做的是使用jQuery自动突出显示选定的div元素。

此刻，一旦我按住元素（背景变为橙色），div元素似乎只是“活跃”。

<html>
<head>
    <title>Samuels HTML-inlämning!</title>



            <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
    </script>



    <script type="text/javascript">


            $('.test').click(function(){
                $('.test').removeClass("active");
                $(this).addClass("active");
            });


    </script>

    <style type="text/css">
        div.test{
            background: grey;
        }

        div.test:hover{
            background: yellow;
        }

        div.test.active{
            background: orange;
        }


    </style>

</head>


    <body>


            <div class="test">
                Stuff
            </div>
            <div class="test">
                Other stuff
            </div>
            <div class="test">
                More Stuff
            </div>


    </body>
</html>

有谁知道为什么这不起作用？完整的示例基本上是相同的，但我是一个ID来选择要突出显示的类而不是（.test）所有类。但该代码产生相同的结果。

更新：

尝试在CSS中进行此更改：

        div.test.active{
            background: orange;
        }

然而现在它并没有高涨。我错过了什么？

Answer 1

这是因为您将CSS中的属性设置为伪类，请尝试：

    div.test.active{
        background: orange;
    }

Answer 2

你正在混合类和状态选择器。：active是一个状态（这意味着你当前是鼠标按下它），而.active是任何随机类（可能是.xyz）。以下是有关州的更多信息：http://css-tricks.com/almanac/selectors/a/active/

无法让jQuery addClass（“active”）工作

2 个答案: