问题描述
所以我有 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>
这篇关于悬停在子级上而对父级没有悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！