我有三个 div
,悬停时会更改它们正下方的文本(这是文本 A,这是文本 B,这是文本 C)。默认事件文本是文本 B。
当我将鼠标悬停在 div.c
上时,我想改变 div.b
的颜色
我在 div.a:hover
上悬停时使用此功能
HTML
<div class="onHoverText">
<div class="a">Text A</div>
<div class="b">Text B</div>
<div class="c">Text C</div>
<div class="outputBox">
<span>This is Text B</span></div>
</div>
CSS
.onHoverText {
cursor: pointer;
}
.a, .b, .c {
display: inline-block;
margin-right: 3%;
font-size: 15px;
}
.b {
color: #FF0004;
border-right: thin dashed #3A3A3A;
border-left: thin dashed #3A3A3A;
padding: 0 2%;
}
.a:hover, .c:hover {
color: #FF0004;
}
.outputBox {
font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span {
display: none;
}
div.a:hover ~ div.outputBox:after {
content:' This is Text A';
}
div.c:hover ~ div.outputBox:after {
content:' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
color: #000;
}
最佳答案
我认为这不起作用的原因是因为 CSS 中的相邻选择器将只定位目标元素之后的元素:
The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
关于html - 悬停文本更改的纯CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24696906/