css当点击一个div元素时，另外一个div元素也改变样式

     我们通常会遇到这样的情况，当鼠标在a元素时b元素的样式也改变。当然用JS实现很简单，那么纯CSS实现呢？其实也是相当简单，代码如下。

一，影响其他元素

  <style>
  .a{
   width:100px;
   height:100px;
     background:#ccc;
   }
  
    .b{
   width:100px;
   height:100px;
     background:#fff;
   }
  .a:hover .b{  background:red;}
 </style>
  <div class="a">1
  <div>
  <div class="b">2
  <div>

二，影响相邻元素

  <style>
  .a{
   width:100px;
   height:100px;
     background:#ccc;
   }
  
    .b{
   width:100px;
   height:100px;
     background:#fff;
   }
  .a:hover +.b{  background:red;}
 </style>
  <div class="a">1
  <div>
  <div class="b">2
  <div>

 同理如果要影响其他元素，可以查看一下CSS元素选择器。