我正在尝试创建一个步骤指示器,将鼠标悬停在步骤上时具有悬停效果。
我在这里发布了一个工作版本https://codepen.io/anon/pen/NOoqde?editors=1100
当用户将鼠标悬停在 step-indicator__item::before
上时,我想更改 step-indicator__item-bubble
的颜色
我尝试在笔中的第 33 行附近做类似的事情
&:hover::before {
cursor: pointer;
}
&:hover::before &-bubble {
background: red;
}
但是这不起作用。
当悬停在父 div 的 ::before
上时,如何定位气泡 div 的背景颜色?
最佳答案
如前所述,您当前的结构是不可能的。
我会像这样...
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;
}
关于html - 将鼠标悬停在 :before element 上时更改相邻的 div 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53003386/