Question

好的，让我们说你有A，B和C盒子，我试图这样做，这样每当盒子A盘旋时，A，B和C变为绿色，当盒子B悬停时，它们全部变为绿色，当C徘徊时，它们都变为绿色。这可能只使用CSS或我是否必须使用javascript来执行此操作？

Answer 1

使用CSS执行此操作的一种方法是基于将鼠标悬停在父容器上，但将指针事件限制为子元素。

.box {
padding: 40px;
display: inline-block;
margin: 20px;
background: grey;
transition: background .2s;
pointer-events: all;
}

.container {
  pointer-events: none;
}

.container:hover .box {
  background: chartreuse;
}

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

Answer 2

您可以使用JQuery悬停事件来实现

$(document).ready(function(){
$("#A").hover(function(){
     $(this).css("background-color", "green");
     $("#B").css("background-color", "green");
     $("#C").css("background-color", "green");
    }, function(){
    $(this).css("background-color", "pink");//original colour
     $("#B").css("background-color", "pink");
     $("#C").css("background-color", "pink");
});
$("#B").hover(function(){
    $(this).css("background-color", "green");       
    }, function(){
    $(this).css("background-color", "pink");//original colour
});
$("#C").hover(function(){
    $(this).css("background-color", "green");       
    }, function(){
    $(this).css("background-color", "pink");//original colour
});

}）;

jsfiddle：https://jsfiddle.net/dLceh5Lw/

Answer 3

检查这个!!!它工作正常:)）

将此内容放入html页面

<div class="box-panel">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
</div>

将此标记放在标题

中的标题内

<style type="text/css">
  .box-panel { display: inline-block; width: 100%; }
  .box { width: 31.33%; float: left; margin: 0 1%; height: 250px; background-color: #ccc; }
  .box.a {  }
  .box.b {  }
  .box.c {  }
</style>

在jquery链接

之后将其放在body标记内

<script type="text/javascript">
  $('.a').hover(function(){
      $('.a, .b, .c').css('background-color', 'green');
  });
  $('.b').hover(function(){
      $('.a, .b, .c').css('background-color', 'red');
  });
  $('.c').hover(function(){
      $('.a, .b, .c').css('background-color', 'blue');
  });

干杯!!!

悬停时更改框颜色

3 个答案: