jQuery – hoverCSS元素1更改Elevement 2
我有两个要素:
.navAbout #slider
在hover.navAbout(这是一个A标签)时,我需要(div)#slider的边框颜色更改为特定颜色。 在mouseOut上,我需要#slider恢复其原始的CSS声明。
我尝试了几个代码。 这是我最近的:
$(".navAbout").hover(function () { $("#slider").css({'border-color' : '#3bc624'}); }, function () { var cssObj = { 'border-color' : '#3bc624', } $("#slider").css(cssObj); });
谢谢您的帮助!
这样的事情应该有所帮助:
JS
$(".navAbout").hover(function () { $("#slider").addClass("coloured-border"); }, function () { $("#slider").removeClass("coloured-border"); });
CSS
.coloured-border { border-color: orange }
这应该是你正在尝试的方向
但@jakeclarkson的答案是解决问题的正确方法。
试试这个
$(".navAbout").hover( $("#slider").toggleClass('borderColor'); });
定义具有所需边框颜色的类
.borderColor { border-color: #FF0000; }
你的方法可行,但你两次都将颜色设置为相同的颜色。
此外,我不确定你是否只在两种颜色之间交替,或者#slider
的颜色是否设置在不同的地方,可能是任何颜色。 如果它可能是任何东西,那么你需要检查它是什么并保存它,以便你可以将颜色设置回原来以后的颜色。
理想情况下,您应该像上面提到的jakeclarkson一样更改类,并避免在javascript / css中保留样式信息。
看到了!
HTML:
我将更改 div>
JavaScript的:
var originalColor =”;
$( “navAbout”)。hover(函数(事件){
originalColor = $("#slider").css("border-color"); $("#slider").css("border-color", "#3bc624");
},function(event){
$("#slider").css("border-color", originalColor);
});
读: