Question

我有两个div并排，默认情况下一个是隐藏的，一个是可见的。

我有一个jQuery函数，当mouseenter显示可见div时，隐藏的那个显示。再次当mouseenter，它再次隐藏起来。（这是一个登录框）

然而 - 我希望始终可见的div（mouseenter目标）根据切换的div所处的状态改变颜色。到目前为止，我可以让它在第一次mouseenter时改变颜色但是在它之后它不会再改变这一点。

这是我到目前为止的代码：

<script> 
$(document).ready(function () {
    $("#loginBox").hide();
    $("#sideBar").show();

    $('#sideBar').mouseenter(function () {
        $("#loginBox").toggle("slide");
        if ($('#loginBox').is(":visible")) {
            $("#sideBar").css("background-color","blue");
        } else if ($('#loginBox').is(":hidden")) {
            $("#sideBar").css("background-color","yellow");
        }       
    });
});
</script>

因此它以默认颜色（样式表为灰色）开始，当鼠标中心时，loginBox变为可见，sideBar变为蓝色。但是当再次使用鼠标时，即使loginBox被隐藏，sideBar也会保持蓝色。

JSFiddle

Answer 1

您可以将支票放入切换的完整功能

http://jsfiddle.net/3rQNb/4/

$("#aside").toggle("slide", function() {
    var onOrOff = $('#asidebar').css("background-color");
    if ($('#aside').is(":visible")) {
        $("#asidebar").css("background-color","blue");
    }
    else {
        $("#asidebar").css("background-color","yellow");
    }       

});

Answer 2

你最好把风格放在一个类上，然后切换它。像

这样的东西

...
$('#sideBar').mouseenter(function () {
    $("#loginBox").toggle("slide");
    $("#sideBar").addClass("semanticallyNamedClassForBlue");
    $("#sideBar").toggleClass("semanticallyNamedClassForYellow");
});
...

CSS：

#sideBar.semanticallyNamedClassForBlue {background: blue}
#sideBar.semanticallyNamedClassForYellow {background: yellow}

根据这个jsfiddle改编自user3787555＆＃39; s http://jsfiddle.net/3rQNb/3/

说明：

在加载时，侧边栏是灰色的。
在第一次悬停时，黄色和蓝色类都会添加到元素中，但由于黄色类在css源中是最后一个，所以它会赢得级联。
在下一次悬停时，黄色类被移除，因此蓝色现在获胜。
我将id添加到css规则中以获得足够的特异性 - 正如您所知#id在级联中击败.class

如果您想了解更多信息，A List Apart's CSS articles和Remy Sharp's JQuery for designers可能会给您带来一些快乐。如果您想了解更多有关特异性的信息，请查看star wars specificity 超棒

使用条件语句更改div的背景颜色

2 个答案: