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元素选择器。

Quote:https://www.itxst.com/detail/m6fjbyuv.html