我知道不存在CSS 父选择器,但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式?
举个例子:考虑一个删除按钮悬停时将突出显示即将删除的元素:
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
通过纯CSS,如何改变鼠标悬停在按钮上时该部分的背景颜色?
我知道这是一个老问题,但我只是设法在没有伪子项(但伪包装器)的情况下做到了这一点。
如果您将父级设置为没有pointer-events
,然后是一个孩子div
with pointer-events
set to auto
, 有用:)
注意<img>
标签(例如)并不能解决问题。
还记得设置pointer-events
to auto
对于其他有自己的事件侦听器的子项,否则他们将失去单击功能。
div.parent {
pointer-events: none;
}
div.child {
pointer-events: auto;
}
div.parent:hover {
background: yellow;
}
<div class="parent">
parent - you can hover over here and it won't trigger
<div class="child">hover over the child instead!</div>
</div>
Edit:
As 暗影巫师温馨提示:值得一提的是,这不适用于 IE10 及以下版本。 (旧版本的 FF 和 Chrome 也是如此,请参阅here)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)