如何減少跨度的隱藏寬度？

我正在處理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

如何減少跨度的隱藏寬度？

回答

相關問題