问题
I am trying to change color of span on div's hover
How to make the red hamburger button (which is span) to change the color to black on div's hover
PS: Right now it does it on span's hover
JSFiddle: https://jsfiddle.net/bjjbqct8/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
background: #ddd;
display: flex;
align-items: center;
cursor: pointer; }
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: rgba(177, 66, 66, 0.8);
position: relative; }
.mobile-nav-toggle span::before {
top: 11px; }
.mobile-nav-toggle span::after {
bottom: 17px; }
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
background: rgba(0, 0, 0, 0.8); }
<div class="mobile-nav-toggle">
<span></span>
</div>
回答1:
Use hover psuedo selector for div instead span.
This is the selector you need to use
.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span::before,
.mobile-nav-toggle:hover span::after {
background: rgba(0, 0, 0, 0.8); }
Here is fiddle.
回答2:
Change your hover
rules,
from this:
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
background: rgba(0, 0, 0, 0.8);
}
to this:
.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after {
background: rgba(0, 0, 0, 0.8);
}
Reason: When you create a rule on hover
of span
and its pseudo-elements, only the ones you hover over will apply the styles. What you need is to create a rule on the div
so that whenever you hover
on that div
the children get the styles.
回答3:
this will work,
.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after,
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
background: rgba(0, 0, 0, 0.8); }
来源:https://stackoverflow.com/questions/32947655/how-to-change-span-color-on-div-hover