当您将鼠标悬停在元素 B 上时,元素 C 会出现。当鼠标不在 B 或 C 上时,它会消失。如何让 C 在鼠标位于 A 上时继续显示,但如果鼠标仅在 A 上,而之前未在 B 上,则 C 本身不会出现?
main {
display: inline-flex;
position: relative;
font-size: 3em;
outline: 1px dotted red;
}
div {
padding: 1em;
}
.b {
background: antiquewhite;
}
.c {
visibility: hidden;
position: absolute;
left: 100%;
background: linear-gradient(to right, silver, gray);
}
.b:hover + .c, .c:hover {
visibility: visible;
}
<main>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</main>