Question

我有一个下面的div和css，

.parent:hover{
  background-color:violet;
}
.child:hover{
  background-color:grey;
}

<div style='border:2px solid red;width:200px;height:100px' class='parent'>
</div>
  <div style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>    
  </div>

这里我已经实现了当我悬停父母时，背景颜色紫色已被应用以及孩子。但我需要实现当我悬停父类时，子类还需要应用于相应的div ..以及当我悬停子类时，父类还需要在相应的div上应用如何实现？

Answer 1

我试过好友

我几乎得到了解决方案。

.parent:hover + .child{ background-color:violet; }

只需添加此css，当你专注于父div时，你将得到两个div的变化。

它正在处理父项，因为子div位于父项旁边。

但它对孩子不起作用，因为父母不在孩子身边。

试试我的css

Answer 2

不幸的是，这不能在css中完成，但是可以通过一些jquery来完成。这是一个例子:) https://jsfiddle.net/qky6z3jv/

$(".parent,.child").hover(function() {
  $(".parent").css('background-color','violet');
  $(".child").css('background-color','grey');
}, function() {
  $(".parent,.child").css('background-color','white');
});

Answer 3

你可以使用简单的javascript来做到这一点。

创建一个将改变两个div的颜色的函数为每个div元素分配一个“ID”。

function changeColor(color_value){
    document.getElementById('div1').style.backgroundColor = "'" + color_value + "'";
    // or you can do something like this
    document.getElementById('div1').setAttribute('background-color', color_value);
    // do the same with the second div.          
}

并更改像

这样的div

<div id="div1" onClick="changeColor('color_hex_value_here')" style='border:2px solid red;width:200px;height:100px' class='parent'

</div>
<div id="div2" onClick="changeColor('color_hex_value_here')"  style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>
</div>

//这可以在没有jQuery或添加任何外部库的情况下完成 //还有一个。你一个接一个地写了两个不同的div。 //可能你想要实现的概念是“父”div中的“Child”div

如何使用css3应用样式

3 个答案: