我正在尝试执行CSS,以便当我将鼠标悬停在跨度上时会显示另一个跨度,但它不起作用,我做错了什么吗?
HTML:
<span class="text">Click me!</span>
<span class="tooltip">HI!</span>
.tooltip {
width: 120px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-align: center;
border-radius: 3px;
border-color: #3e3e3e6c;
box-shadow: 0px 3px 6px #00000029;
padding: 5px;
font-size: 16px;
position: relative;
top: -8px;
left: 27px;
white-space: nowrap;
}
.text:hover + .tooltip-for-designation {
display: block;
color: red;
background-color: red;
}
最佳答案
您需要将带有类工具提示的跨度设置为隐藏(显示:无;)并且您的 .text:hover + .tooltip-for-designation 应该是 .text:hover + .tooltip 才能使其工作。
参见示例:
.tooltip {
display: none;
width: 120px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-align: center;
border-radius: 3px;
border-color: #3e3e3e6c;
box-shadow: 0px 3px 6px #00000029;
padding: 5px;
font-size: 16px;
position: relative;
top: -8px;
left: 27px;
white-space: nowrap;
}
.text:hover + .tooltip {
display: block;
}
<span class="text">Click me!</span>
<span class="tooltip">HI!</span>
关于html - 将鼠标悬停在跨度上显示另一个跨度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73975051/