css3中的工具提示，在懸停時具有過渡效果
[英]Tooltip in css3 with transition effect in hover
問題描述
我用HTML 5和CSS 3制作了一個具有懸停效果的工具提示。 我在懸停時使用了高度的過渡效果。 當我使用overflow: hidden; 工具提示的箭頭消失了。 可能是什么問題呢？
我試過overflow: visible; 在懸停和tooltiptext::after 。 但箭仍然消失了。
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; visibility: hidden; overflow: hidden; width: 100px; background-color: #ffff; color: black; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; transition: height 2s; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip:hover .tooltiptext { visibility: visible; height: 55px; border: 1px solid black; }
<h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Click to go to our main course page</span> </div>
工具提示應該用箭頭滑動但有溢出：隱藏屬性，尖端消失。
3 個解決方案
解決方案1
0 2019-06-11 10:00:58
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; visibility: hidden; overflow: hidden; width: 100px; background-color: #ffff; color: black; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; transition: height 2s; } .arrow{ position:relative; } .arrow::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; opacity:0; } .tooltip:hover .tooltiptext { visibility: visible; height: 55px; border: 1px solid black; } .tooltip:hover .arrow::after{ opacity:1; } </style> <body style="text-align:center;"> <h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <div class="arrow"> <span class="tooltiptext">Click to go to our main course page</span> </div> </div> </body> </html>
我把內容包裝在一個div中，然后應用到這個div！
解決方案2
0 2019-06-11 10:03:57
問題是您使用可見性屬性。 只需從你定義它的兩個地方刪除它，你的例子就可以了。 能見度無法動畫。 如果需要，請嘗試不透明度
解決方案3
0 2019-06-11 10:04:26
一個想法是考慮tooltiptext高度內的tooltiptext 。 為此，您可以使用其他偽元素創建邊框，然后為箭頭添加更多填充頂部：
body { text-align:center; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; overflow: hidden; visibility:hidden; width: 100px; color: black; text-align: center; padding: 15px 10px 5px; /*Increase the padding-top*/ position: absolute; z-index: 1; top: 100%; left: calc(50% - 60px); transition: height 2s,visibility 0s 1.5s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 0; left: calc(50% - 5px); border: 7px solid; border-color: transparent transparent black transparent; z-index:-1; } /* to create the border */ .tooltip .tooltiptext::before { content: ""; position: absolute; top: 14px; /* we offset the top by the arrow height*/ left: 0; right:0; bottom:0; border: 1px solid; border-radius: 6px; background:#fff; z-index:-1; } /**/ .tooltip:hover .tooltiptext { visibility: visible; height: 55px; transition: height 2s,visibility 0s 0s; }
<h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Click to go to our main course page</span> </div>
CSS3過渡效果，用於將鼠標懸停在和關閉
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.