Question

你好吗？！好吧，我有一个问题。我在一个名为“section2”的div上面有一个链接，我需要的是在悬停时更改Div背景颜色并保持新颜色，直到你将鼠标悬停在第二个链接上，该div的背景颜色应该改变。我不需要改变链接的背景颜色，我只需要从后面改变div的背景颜色。

<script language="javascript">

$(function(){
$("#changer").on("click",function(e){
e.preventDefault();
var body = document.getElementById("section2"),
    green = "rgb(0, 128, 0)",
    white = "rgb(255, 255, 255)";

if(body.css("backgroundColor") !== green){
  body.css("backgroundColor",green);
}else{
  body.css("backgroundColor",white);
}
});
})

</script>

和html

<div id="section2" align="center">
    <a href="#" id="changer">Click me</a>
</div>

Answer 1

原生HTML元素没有css方法，这是jQuery方法。因此，body的代码应为：

var body = $("#section2"),

整个演示：

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();
        var body = $("#section2"),
            green = "rgb(0, 128, 0)",
            white = "rgb(255, 255, 255)";

        if (body.css("backgroundColor") !== green) {
            body.css("backgroundColor", green);
        } else {
            body.css("backgroundColor", white);
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section2" align="center">
    <a href="#" id="changer">Click me</a>
</div>

但是，比较背景颜色的CSS属性值非常不可靠。你最好比较/检查课程：

$("#changer").on("click", function (e) {
    e.preventDefault();
    $("#section2").toggleClass('green white');
});

.green {background-color: rgb(0, 128, 0);}
.white {background-color: rgb(255, 255, 255);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section2" class="white" align="center">
    <a href="#" id="changer">Click me</a>
</div>

Answer 2

使用JQuery引用项目：

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2"),
            green = "rgb(0, 128, 0)",
            white = "rgb(255, 255, 255)";

        if (body.css("backgroundColor") !== green) {
            body.css("backgroundColor", green);
        } else {
            body.css("backgroundColor", white);
        }
    });
})

Answer 3

我就这样做了：

const

Here is the JSFiddle demo

Answer 4

尝试使用CSS类控制$("#section2") background-color属性：

#section2.green {
  background-color: green;
}

#section2.white {
  background-color: white;
}

所以，使用jQuery添加背景颜色：

$(function () {
    $("#changer").on("click", function (e) {
        e.preventDefault();

        var body = $("#section2");

        if (body.hasClass('green')) {
            body.removeClass('green')
              .addClass('white');
        } else {
            body.removeClass('white')
              .addClass('green');
        }
    });
})

Answer 5

接近工作后，

{{1}}

单击链接更改特定Div背景颜色

5 个答案: