Question

我正在学习jQuery，并且我编写了一个简单的脚本，用于在鼠标进入（或离开）div时添加（或删除）一个类。新类添加了不同的高度，并且还应该更改输入的div的背景颜色和不透明度。

以下是代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Testing jQuery</title>
    <style type="text/css">
        div {
            width: 400px;
            height: 300px;
            margin: 20px;
            float: left;
        }


        #one {
            background-color: red;
        }

        #two {
            background-color: green;
        }

        #three {
            background-color: blue;
        }

        .change {
            height: 150px;
            background-color: rgba(0,0,0,0.4);
        }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

    <script type="text/javascript">

        $(document).ready(function () {
            $("div").mouseenter(function () {
                $(this).addClass("change");
            });

            $("div").mouseleave(function () {
                $(this).removeClass("change");
            });
        });

    </script>

</body>
</html>

当高度发生变化时，对background-color属性没有影响。为什么会这样？

我已查看了.mouseenter()，.mouseleave()和.addClass() API文档，但找不到任何针对此问题的内容。

Answer 1

重新阅读后编辑回答：

您正在遇到CSS特异性问题。 ID比类更具体，这意味着您的背景颜色将保持ID的颜色而不是类。这就是为什么（通常）建议不要在CSS中使用ID的原因之一。

如果您将所有内容更改为类，它将按照您的期望工作：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Testing jQuery</title>
    <style type="text/css">
        div {
            width: 400px;
            height: 300px;
            margin: 20px;
            float: left;
        }


        .one {
            background-color: red;
        }

        .two {
            background-color: green;
        }

        .three {
            background-color: blue;
        }

        .change {
            height: 150px;
            background-color: rgba(0,0,0,0.4);
        }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <script type="text/javascript">

        $(document).ready(function () {
            $("div").mouseenter(function () {
                $(this).addClass("change");
            });

            $("div").mouseleave(function () {
                $(this).removeClass("change");
            });
        });

    </script>

</body>
</html>

Answer 2

尝试使用C选择器css，#one:hover, #two:hover, #three:hover伪类，:hover。另请参阅Specificity

＆＃13;

transition

＆＃13;

Answer 3

您的javaScript代码100％正常。你写的问题出在CSS中。按ID #one选择比classname .one更重要，因此当您同时向emenet应用某些#rules和.rules时，浏览器会选择第一个更重要。如果可以的话，尽量不要在css中使用#id选择器，并将其留给javaScript使用。

的CSS：

.one {
    background-color: red;
}

.two {
    background-color: green;
}

.three {
    background-color: blue;
}

HTML：

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

演示：https://jsfiddle.net/cz8v1gy4/

Answer 4

There are some good answers here and explanations why it's not working, but it looks like no one has answered how to do what it seems like your intent was.

Which was to add the two background colors together to get a darker color on hover. You can get around it changing it to a grey by adding something else in.

For example:

.change {
    height: 150px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%)!important;
}

This puts a solid color gradient in as the background image which layers on top of the background color.

Like This JSFiddle

Answer 5

当您将鼠标悬停在div#one上时，它会变为div#one.changed。现在关于背景颜色，您有两个相互竞争的值：

#one {
  background-color: red;
}

和

.change {
  background-color: rgba(0,0,0,0.4);
}

第一个获胜，因为它是more specific。

绕过这个用途

.change {
  height: 150px;
  background-color: rgba(0,0,0,0.4)!important;
}

在jQuery中使用addClass更改背景颜色

5 个答案: