我有一个工具提示,当前可用于悬停,但是过渡效果不起作用。我已将初始不透明度设置为0,并使用transition
属性将不透明度悬停为1。
这里是代码:
.tooltip {
position: relative;
cursor: pointer;
&::before,
&::after {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
&:hover::before {
content: "";
border: solid transparent;
border-bottom-color: red;
border-width: 10px;
position: absolute;
top: 20px;
opacity: 1;
}
&:hover::after {
content: attr(data-tooltip);
position: absolute;
margin: 0;
text-align: center;
min-width: 160px;
background: red;
color: white;
padding: 1rem;
border-radius: 4px;
right: -30%;
top: 40px;
z-index: 1;
font-size: 0.875rem;
opacity: 1;
}
}
HTML:
<span class="tooltip" data-tooltip="Tooltip Content">
Hover Me
</span>
从w3schools获取示例代码
跟随正在工作的代码段是我要这样做的-在非悬停状态下具有过渡属性,仅在悬停状态下更改不透明度值
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
transition: opacity 0.5s ease-in-out;
opacity: 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>