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

我正在处理tooltip，here是我的代码。当我在问号附近移动鼠标时，它向我显示工具提示，只有当我将鼠标放在问号上时，我如何才能显示工具提示如何减少跨度的隐藏宽度？

2014-03-12 baig772

您已经标记了您的问题，如JavaScript，但你的代码不包含任何内容。你有什么尝试？ – otherDewi

我加了

width:0px; 
overflow:hidden;

to tooltipsignup be脱颖而出的CSS

，然后将其翻转到

width:186px; 
overflow:visible;

悬停

来源

2014-03-12 20:47:45 user2782001

是的，这就是我一直在寻找，谢谢 – baig772

@ baig772如果你打算这样做，我至少会确保悬停状态使用自动宽度，否则你给自己一个维修的痛苦。 –

我只使用了186px，因为这是他最初在他的代码中。尽管汽车可能会给你一行真正宽的文本，这并不理想。 – user2782001

您的代码无法工作，因为您已连接悬停的跨度效果包括工具提示，这会增加其父级的大小，因为您已将其设置为透明，而不是将其从流中移除。

的最简单的解决办法是增加显示：无至.tooltipSignup并显示：内联块到.tooltipSignup：悬停

来源

2014-03-12 20:47:12

我包含了我的代码的工作链接 – baig772

代替使用opacity:0和opacity:1使用display:none和display:block

来源

2014-03-12 20:47:38 Farnabaz

然后你不会得到漂亮的过渡，对吧？ – imtheman

请注意，使用display：none会破坏像他在透明度上使用的CSS转换。 – user2782001

@ user2782001谢谢您的确认。 – imtheman

添加此代码。它运作良好。

？ Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem存有一直是业界标准的虚拟文本，自从16世纪，当一个未知的打印机采取了类型的厨房和炒它做一个类型

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

来源

2014-03-12 21:18:23

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

回答

相关问题