将鼠标悬停在没有悬停效果的孩子身上

Question

所以我有2个人div,他们彼此都是这样的

<div class="parent">
    <div class="child"></div>
</div>

我想改变background从.parent我悬停时的距离.parent.

但是background当我将鼠标悬停在上面时,我想再次恢复正常.child.

例如:http://jsfiddle.net/k3Zdt/1/

当我将鼠标悬停在深蓝色区域时,我希望不那么深蓝色的区域保持不那么深蓝色而不是变成白色.

我想保留这个<div>结构.我不想要一个JavaScript解决方案(我知道JavaScript解决方案,但我想保持它纯CSS).

Answer 1

基本上你不能:在悬停子元素时如何设置父元素的样式？

但一个技巧是使用兄弟元素:http: //jsfiddle.net/k3Zdt/8/

.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}

Answer 2

你可以欺骗一些东西;)

基本上,:before对子div 使用伪元素,大小相同;

当你将鼠标悬停在子div上时,将:before伪元素放大以覆盖父div区域; 这会导致父亲div hover效果下降,然后再回到原始状态.也涉及z-index的精确组合.

演示:http://jsfiddle.net/gFu8h/

CSS ^{Dark Magic(tm)}

.parent {
    width: 100px;
    height: 100px;
    padding: 50px;
    transition: background-color 1s;
    background: #3D6AA2;    
    position: relative;
    z-index: 1;
}

.parent:hover{
    background: #FFF;    
}

.child {
    height: 100px;
    width: 100px;
    background: #355E95;
    transition: background-color 1s;
    position: relative;
}

.child:hover {    
    background: #000;
}

.child:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;        
    z-index: -1;
    transition: background-color 1s;
}

.child:hover:before{
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;     
    background: #3D6AA2;    
}