悬停在子级上而对父级没有悬停效果

2022-01-22 00:00:00 hover css

所以我有 2 个 div,它们彼此相辅相成,就像这样

当我将鼠标悬停在 .parent 上时,我想从 .parent 更改 background.

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

例如:(或 http://jsfiddle.net/k3Zdt/1/)

.parent {过渡:背景色 1s;宽度:100 像素;高度:100px;背景:#3D6AA2;填充:50px;}.父:悬停{背景:#FFF;}.孩子 {高度:100px;宽度:100 像素;背景:#355E95;过渡:背景色 1s;}.child:悬停{背景:#000;}

<div class="parent"><div 类="子"></div></div>

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

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

解决方案

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

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

.parent {宽度:100px;高度:100px;填充:50px;}.孩子 {高度:100px;宽度:100px;背景:#355E95;过渡:背景色 1s;位置:相对;顶部:-200 像素;}.child:悬停{背景:#000;}.兄弟姐妹{位置:相对;宽度:100px;高度:100px;填充:50px;顶部:-50 像素;左:-50px;背景:#3D6AA2;过渡:背景色 1s;}.兄弟:悬停{背景:#FFF;}

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

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

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

and I want to change the background from .parent when I hover over .parent.

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

so for example: (or 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).

解决方案

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/

.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>

相关文章