Question

下午好，

如果可能，我需要一点帮助......

正如标题所解释的，当你将鼠标悬停在一个div上时，我希望更改其他多个div样式（最小的不同颜色）。我目前尝试使用纯CSS，但发现它非常困难。 My JSFiddle

正如你在我的JSFiddle上看到的，当你将鼠标悬停在“红色”上时如果你将鼠标悬停在“绿色”上，那么任何一方的方框都会将颜色变为黄色。框，它会将颜色变为黄色，但是，如果你超过粉红色＆＃39;它将颜色更改为青色，但最左边的框也变为黄色，我不想发生这种情况。

有人可以帮忙吗？我不介意如果我必须使用JQuery / Javascript这不是一个问题，我只是尝试使用CSS，因为我不知道JQuery / Javascript。

谢谢你，我希望我想要实现的目标是正确的。

CSS

img{width:100%;}
#container{width:100%; float:left;}
.maintest{width:20%; height:150px; background:red; float:left;}
.maintest:hover{background:#f2f2f2;}


.maintest2{width:20%; height:150px; background:green; float:left;}
.maintest2:hover{background:magenta;}
.maintest3{width:20%; height:150px; background:pink; float:left;}
.maintest3:hover{background:cyan;}


#container:hover .maintest2{background:yellow; border-right:solid 1px black;}
.maintest:hover ~ .maintest3{background:yellow}

HTML

<div id="container">

<a href="#" class="maintest2">

</a>

 <a class="maintest" href="#"></a>

 <a href="#" class="maintest3"></a>

</div>

Answer 1

此规则#container：hover .maintest2 {}导致您不想要的行为。但是这也给了你想要的行为＃34;当我将鼠标悬停在红色上时，它会将其他2个框改为黄色。

就像评论者所说的那样，如果不使用JS，这看起来并不可能。

快速jquery：

$(".maintest2, .maintest3").hover(function(){
    $(this).addClass("yellow-background");
}, function(){
    $(this).removeClass("yellow-background");
});

$(".maintest").hover(function(){
    $(".maintest2, .maintest3").addClass("yellow-background");
}, function(){
    $(".maintest2, .maintest3").removeClass("yellow-background");
});

悬停事件的文档：https://api.jquery.com/hover/

Answer 2

由于你不介意使用jQuery，我会给你一个jQuery答案，

$('.box').each(function() {

  //this will iterate through each div with class=box
  $(this).hover(function() {
      //on mouse in
      $(this).attr('data-active-box', 'true');
    },
    function() {
      //on mouse out
      $(this).attr('data-active-box', 'false');
    });

});

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
}
.box[data-active-box='true'] {
  background-color: green;
}
.box[data-active-box='false'] {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='box box1' data-active-box='false'></div>
<div class='box box2' data-active-box='false'></div>
<div class='box box3' data-active-box='false'></div>

js将在鼠标输入/输出时切换数据属性。 css将根据属性设置div的样式。有一百万种方法可以做到这一点！

将鼠标悬停在一个div上时，请更改多个其他div的样式

2 个答案: