悬停子元素时如何设置父元素的样式？
悬停子元素时如何设置父元素的样式？
提问于 2011-11-14 04:54:29
我知道不存在CSS parent selector，但在没有这样的选择器的情况下，是否可以在悬停一个子元素时设置父元素的样式？
举个例子:考虑一个delete按钮，当悬停该按钮时，将突出显示即将被删除的元素：
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>通过纯CSS的方式，当鼠标悬停在按钮上时，如何更改此部分的背景色？
回答 3
Stack Overflow用户
发布于 2011-11-14 04:55:31
没有用于选择选定子项的父项的CSS选择器。
您可以使用JavaScript来完成此操作
Stack Overflow用户
发布于 2018-04-23 17:02:55
这个解决方案完全依赖于设计，但是如果您有一个父div，您希望在悬停孩子时更改其背景，您可以尝试使用::after / ::before来模仿父div。
<div class="item">
design <span class="icon-cross">x</span>
</div>CSS：
.item {
background: blue;
border-radius: 10px;
position: relative;
z-index: 1;
}
.item span.icon-cross:hover::after {
background: DodgerBlue;
border-radius: 10px;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
}Stack Overflow用户
发布于 2016-03-16 08:16:35
这在Sass中是非常容易做到的！不要为此钻研JavaScript。sass中的& selector就是这样做的。
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8114657
复制相关文章
相似问题
腾讯云开发者
