通过在子节点上悬停影响父元素
通过在子节点上悬停影响父元素
提问于 2019-08-20 07:03:55
比方说我有过这样的经历：
<div class="bigWrap">
<div class="element">
...
<div class="HoverThisElement"></div>
...
</div>
<div class="element">
...
<div class="HoverThisElement"></div>
...
</div>
<div class="element">
...
<div class="HoverThisElement"></div>
...
</div>
</div>
我需要影响.element，当他的孩子.HoverThisElement在空中徘徊。我能这么做吗？如果可能的话，请用SASS举例
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-08-20 07:25:41
我有一个解决办法，使用CSS使用pointer-events。这可能会有帮助。
.element {
background: red;
padding: 10px;
margin: 10px;
pointer-events: none;
}
.HoverThisElement {
background: yellow;
padding: 15px;
pointer-events: auto;
}
.element:hover {
background: green; //add some styles you want to parent element
}<div class="bigWrap">
<div class="element">
<div class="HoverThisElement"></div>
</div>
<div class="element">
<div class="HoverThisElement"></div>
</div>
<div class="element">
<div class="HoverThisElement"></div>
</div>
</div>
Stack Overflow用户
发布于 2019-08-20 07:43:41
就像"little_coder“说你可以骗这个。
但是，当您想要支持IE10 (不支持指针事件)时，您只需使用覆盖DIV并使用同级选择器(您也可以使用伪元素)将其作为目标。
.overlay {
position: absolute;
background-color: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
transition: all .3s;
}
.HoverThisElement {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 50px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
z-index: 3;
&:hover {
+ .overlay {
right: 200px;
}
}
}Stack Overflow用户
发布于 2019-08-20 07:12:31
在CSS中无法做到这一点，因为没有父CSS中的选择器。
如果你真的需要这样做，唯一的方法就是使用JavaScript
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57568282
复制相关文章
相似问题
腾讯云开发者
