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

我正在处理

工具提示

，这是我的代码。当我将鼠标移到问号附近时，它会向我显示工具提示，以及如何显示工具提示，只有当我将鼠标移到问号上时，您的代码才起作用，因为您已附加悬停效果的范围包括工具提示，这会增加其父对象的大小，因为您已使其透明，而不是将其从流中移除

---

最简单的解决方案是将display:none添加到.tooltipSignup和display:inline block添加到.tooltipSignup:hover

而不是使用

opacity:0

和

opacity:1

使用

display:none

和

display:block

我补充说

width:0px;
overflow:hidden;

到css之前的tooltipsignup

然后把它翻到

width:186px;
overflow:visible;

---

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

?？ Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一个字体

---

---

不过，您不会得到很好的转换，对吧？请注意，使用display:none会破坏css转换，就像他在不透明上使用的转换一样。@user2782001谢谢您的确认。@baig772如果您要这样做，我至少会确保悬停状态使用自动宽度，我只使用了186px，因为这是他最初在代码中使用的。虽然auto可能会给你一行非常宽的文本，但这并不理想。你已经将你的问题标记为javascript，但你的代码不包含任何内容。你试过什么？

.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;
}