Question

我正在处理tooltip，here是我的代码。当我将鼠标移动到问号附近时，它会显示工具提示，如何显示工具提示，仅当我将鼠标带到问号上时

Answer 1

我添加了

width:0px;
overflow:hidden;

到css之前的tooltipsignup

然后将其翻到

width:186px;
overflow:visible;

悬停

Answer 2

您的代码不起作用，因为您将悬停效果附加到的跨度包括工具提示，这会增加其父级的大小，因为您已将其设为透明而不是将其从流动。

最简单的解决方案是将display：none添加到.tooltipSignup并显示：inline-block to .tooltipSignup：hover

Answer 3

而不是使用opacity:0和opacity:1使用display:none和display:block

Answer 4

添加此代码。它工作得很好。

？ Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房并将其拼凑成一个类型

.hover {
    position:relative;
    top:2px;
    left:5px;
    font-size: 15px;
    font-weight: bold;
}
.tooltipSignup {
    width: 186px;

    background-color:black;
    color:white;
    border-radius:5px;

    position:absolute;
    display: none;

}

.hover:hover .tooltipSignup {
    display : block;
}

.hoverCupon {
    position:relative;
    top:3px;
    left:4px;
}

.tooltipCupon {
    width: 133px;
    top:-20px;
    right:-20px;
    background-color:black;
    color:white;
    border-radius:5px;
    opacity:0;
    position:absolute;
    -webkit-transition: opacity 0.5s;
    -moz-transition:  opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition:  opacity 0.5s;
    transition:  opacity 0.5s;
}

.hoverCupon:hover .tooltipCupon {
    opacity:1;
}

如何减少跨度的隐藏宽度？

4 个答案: