CSS从另一个div中改变div的颜色

Question

朋友。我有两个div。在一个div中我有一些列表项“li”。我想要做的是每次我将鼠标悬停在div 1中的li上时，我想改变div 2的背景颜色。我需要使用css。谢谢。                                   

         

         

您好

         

所以我想要的是当将鼠标悬停在具有id“red”的li上时，将div的背景颜色更改为红色。用css。 这是我的整个Html文件。

Answer 1

如果您的#childDiv ，则#parentDiv

#childDiv{
   color:gold; /* Default color */
}
#parentDiv:hover #childDiv{
   color:red;
}

否则如果你的元素没有嵌套但是在HTML中的不同位置 - 你需要一些JavaScript来完成你需要的东西。

对于初学者，我建议使用jQuery，一个JavaScript库。代码如下所示：

jQuery(function($){

  $("[data-hover]").hover(function(){
      $("#"+ this.dataset.hover).toggleClass("bloodify");
  });
  
});

.bloodify{
  background:#800000;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-hover=one>One</li>
  <li data-hover=two>Two</li>
</ul>

<div id=one>THIS IS DIV ONE</div>
<div id=two>THIS IS DIV TWO</div>