CSS从另一个div中更改一个div颜色

Question

老友记.我有两个DIVS。在一个div中，我有几个列表项“li”。我想做的是，每次我悬停在div 1的li上时，我想改变div 2的背景颜色。为此我需要使用css。谢谢.

你好

null

所以我想要的是，当悬停在id为“red”的li上时，将类为“contents”的div的背景颜色更改为红色。使用CSS。这是我的全部Html文件。

Answer 1

如果#childdiv在#parentdiv中

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

否则，如果您的元素不是嵌套的，而是在HTML中的不同位置，那么您将需要一些JavaScript来完成所需的工作。

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

null

jQuery(function($){

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

css lang-css prettyprint-override">.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>