如何解决使用CSS将父元素的伪元素:: after / :: before悬停在子元素的CSS上
这是我尝试过的和我想做的事情的小提琴:
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent::after:hover + #child{
color:black;
}
#parent::after:hover ~ #child{
color:black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
当我将鼠标悬停在::after
的{{1}}时,我想更改#parent
的颜色。
这是否可以与纯CSS一起使用,还是必须使用js?
解决方法
您可以这样操作...对于子元素,不能使用+或〜符号。它用于兄弟姐妹而不是孩子。
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent:hover #child{
color:red;
}
#parent:hover::after{
color:blue;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
,
pointer-events
可以在这里帮助您
#child {
color: white;
}
#parent *,#parent{
pointer-events: none; /* disable for parent and all childs */
}
#parent::after {
content: "This";
color: black;
pointer-events: initial; /* keep it for the pseudo element */
}
#parent:hover #child { /* the pseudo element will trigger this hover */
color: black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。