I am trying to create a step indicator, with a hover effect when hovering over a step.
I have posted a working version here https://codepen.io/anon/pen/NOoqde?editors=1100
I would like to change the colour of step-indicator__item-bubble
when a user hovers over step-indicator__item::before
I have tried todo something like this around line 33 in the pen
&:hover::before {
cursor: pointer;
}
&:hover::before &-bubble {
background: red;
}
However this does not work.
How can I target the background colour of the bubble div, when hovering over the ::before
of the parent div?
As previously stated that's not possible with your current structure.
I would approach this something like...
html
<ul>
<li>1
<div class='bubble'></div>
</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
css
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li:hover .bubble {
display: block;
}
li .bubble {
display: none;
height: 40px;
width: 40px;
background: red;
position: absolute;
top: 40px;
left: -5px;
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.