CSS 悬停在孩子上而对父母没有悬停效果

hover on child without hover effect on parent

提问by EaterOfCode

So I have 2 div's they're in each other so like this

所以我有 2div的他们彼此如此像这样

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

and I want to change the backgroundfrom .parentwhen I hover over .parent.

我想改变background的.parent时候我悬停.parent。

but I want the backgroundto turn normal again when I hover over .child.

但我希望background当我将鼠标悬停在 时再次恢复正常.child。

so for example: (or http://jsfiddle.net/k3Zdt/1/)

例如：（或http://jsfiddle.net/k3Zdt/1/）

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

.parent:hover {
    background:#FFF;
}

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

.child:hover {
    background:#000;
}

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

When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.

当我将鼠标悬停在深蓝色区域上时，我希望不那么深蓝色的区域保持不那么深蓝色而不是变为白色。

I would like to keep this <div>structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).

我想保留这种<div>结构。我不想要 JavaScript 解决方案（我知道 JavaScript 解决方案，但我想保持它纯 CSS）。

采纳答案by luxcem

Basically you can't : How to style the parent element when hovering a child element?

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

But a trick is to use a sibling element : http://jsfiddle.net/k3Zdt/8/

但一个技巧是使用兄弟元素：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;
}

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

回答by Andrea Ligios

You can trick something ;)

你可以欺骗一些东西;)

Basically, use a :beforepseudo-element for the child div, with its same size;

基本上，:before为子 div使用一个伪元素，其大小相同；

when you hover on the child div, enlarge the :beforepseudo-element to cover the father div area; this will cause the father div hovereffect to fall down, and then to come back to the original state. A precise combination of z-index is involved too.

当你悬停在子div上时，放大:before伪元素以覆盖父div区域；这会导致父divhover效果下降，然后又回到原来的状态。还涉及 z-index 的精确组合。

Demo: http://jsfiddle.net/gFu8h/^{Dark Magic(tm)}

演示：http: //jsfiddle.net/gFu8h/^{黑魔法（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;    
}

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