<分区>
标签 javascript jquery html css
我想让多个元素在悬停时改变颜色。我试图让它通过 Javascript 工作，我不是这方面的英雄。
基本上，我想要实现的是，当我将鼠标悬停在黑色 div 或白色 div 上时，它应该改变颜色(黑色变为白色，反之亦然)。
Javascript:
$('#onethirdcolumn').hover(function(){
$('#onethirdcolumn + .leesmeer').css({
'color':'#fff',
'background-color':'#000000'
});
},function(){
$('#onethirdcolumn + .leesmeer').css({
'color':'#000000',
'background-color':'#fff'
});
});
最佳答案
你根本不需要使用 javascript 来实现这个效果。
假设 html 如下:
<div class="wrapper">
<div class="container black"></div>
<div class="container white"></div>
<div class="container black"></div>
<div class="container white"></div>
</div>
在CSS中可以实现悬停效果:
.container {
display: inline-block;
width: 50px;
height: 50px;
-moz-transition: all 1s; /* Why? Because they're purdy... */
-webkit-transition: all 1s;
transition: all 1s;
}
.black {
background: #000;
color: #fff; /* Yay! Contrast! */
}
.white {
background: #fff;
color: #000; /* it DOES matter if you're black or white (if you're text, that is) */
}
.black:hover {
background: #fff;
color: #000; /* if you've got text of the opposite color inside */
}
.white:hover {
background: #000;
color: #fff; /* and again... */
}
如果你想让它们全部改变:
.wrapper:hover .black { /* Bam! Spice weasel */
background: #fff;
color: #000;
}
.wrapper:hover .white {
background: #000;
color: #fff;
}
这是一个 Fiddle
关于javascript - 悬停时更改多个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21349747/