Javascript 悬停时更改方框颜色

好的，假设有框A，B和C，我试着让框A悬停时，A，B和C变为绿色，当框B悬停时，它们都变为绿色，当框C悬停时，它们都变为绿色。这只可能使用CSS还是我必须使用javascript才能做到

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

.box{
填充：40px；
显示：内联块；
利润率：20px；
背景：灰色；
过渡：背景2；
指针事件：全部；
}
.集装箱{
指针事件：无；
}
.container:hover.box{
背景：黄绿色；
}

A.
B
C

您可以使用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
});

}))

---

jsFIDLE:

检查这个！！！它工作正常：）

将其放入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>

.box面板{显示：内联块；宽度：100%；}
.box{宽度：31.33%；浮动：左侧；边距：0.1%；高度：250px；背景色：#ccc；}
.box.a{}
.box.b{}
.box.c{}

将此置于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');
  });

$（'.a'）.hover（函数（）{
$（'.a、.b、.c'）.css（'background-color'，'green'）；
});
$（'.b'）。悬停（函数（）{
$（'.a、.b、.c'）.css（'background-color'，'red'）；
});
$（'.c'）.hover（函数（）{
$（'.a、.b、.c'）.css（'background-color'，'blue'）；
});

---

干杯

您好，您需要使用JavaScript。我说您使用jQuery，这也很容易做到。我不认为你可以单独使用css来实现它。@HelloUniverse css是可能的，但我100%同意js更容易编码、扩展和维护。使用css和javascript可以实现这一点。您有责任首先通过搜索堆栈溢出或internet来找到这些解决方案。在堆栈溢出时，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的东西，清楚地解释什么不起作用，并在问题本身提供一个答案。哦，我看错了。我以为你说在a上盘旋会导致b和c变成绿色…希望我能投两次赞成票。一个用于提供正确答案，另一个用于使用黄绿色。