Question

我想在悬停时让多个元素改变颜色。我试图让它通过Javascript工作，我不是这个的英雄。

基本上，我想要实现的是当我悬停黑色div或白色div时它应该改变颜色（黑色变为白色，反之亦然）。

使用Javascript：

$('#onethirdcolumn').hover(function(){
    $('#onethirdcolumn + .leesmeer').css({
        'color':'#fff',
        'background-color':'#000000'
    });
},function(){
    $('#onethirdcolumn + .leesmeer').css({
        'color':'#000000',
        'background-color':'#fff'
    });
});

jsfiddle

Answer 1

您根本不需要使用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

Answer 2

这是 FIDDLE

<div class="box w">TEXT</div>
<div class="box b">TEXT</div>
<div class="box w">TEXT</div>
<div class="box b">TEXT</div>
<div class="box w">TEXT</div>
<div class="box b">TEXT</div>


.box {
  float: left;
  width: 220px;
  height: 220px;
  padding: 10px;
  border: 1px solid #ddd;
  transition: all 0.3s linear;
}
.box.w {
  background: white;
  color: black;
}
.box.b {
  background: black;
  color: white;
}


$(function() {
  $(document).on('mouseenter','.box', function() {
    if($('.box').hasClass('w')) {
       $('.box').toggleClass('b');
    }
    if($('.box').hasClass('b')) {
       $('.box').toggleClass('w');
    }
  });
});

在悬停时更改多个元素

2 个答案: