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

我有2个并排的div，默认情况下一个隐藏，一个可见。使用条件语句更改div的背景颜色

我有一个jQuery函数，当鼠标输入可见的div，隐藏的显示。而当鼠标再次进入时，它又变得隐藏起来。（这是一个登录框）

但我希望始终可见的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>

因此，它在其默认的颜色开始了（通过样式表灰色），当mouseenters它loginBox变得可见，侧边栏变成蓝色。但是当鼠标再次出现时，即使loginBox变为隐藏，sideBar仍然是蓝色的。

JSFiddle

来源

2014-07-10 joshnik

这将是巨大的，如果你犯了一个的jsfiddle并发布它... – j809

可能是因为登录框滑动，所以它仍然可见时执行检查 – Huangism

是啊请提供一个jsffidle请.. – MickyScion

您可以将检查中切换的功能齐全

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"); 
    }  

});

来源

2014-07-10 14:33:06 Huangism

绝对享受！非常感谢。那么，我想在jQuery中注意排序的变化？ – joshnik

为什么'else if'而不是'else'？你真的希望看到“可见”或“隐藏”以外的东西吗？ :)如果你必须走这条路线（而不是类），只需使用一个三元运算符：http://jsfiddle.net/TrueBlueAussie/3rQNb/5/ –

是的，如果在这种情况下没有其他的需要 – Huangism

你最好把样式上的一类，并反复说来代替。喜欢的东西

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

CSS：

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

按本的jsfiddle改编自user3787555的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超级真棒

来源

2014-07-10 14:29:39 Ruskin

希望这是你所期望的行为。请注意类的特殊性和顺序 – Ruskin

是的，这正是我一直在寻找的行为。我不知道你可以在CSS中使用类似的类。非常感谢！ – joshnik

+1：是的。最好（也更简单）切换类而不是直接修改css样式。这应该是正确的答案:) –

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

回答

相关问题