css3中的工具提示，在悬停时具有过渡效果
[英]Tooltip in css3 with transition effect in hover
问题描述
I have made a tooltip with HTML 5 & CSS 3 with a hover effect. 
我用HTML 5和CSS 3制作了一个具有悬停效果的工具提示。 I have used a transition effect with height on hover. 我在悬停时使用了高度的过渡效果。 When I used overflow: hidden; 当我使用overflow: hidden; the arrow of the tooltip disappears. 工具提示的箭头消失了。 What could be the problem? 可能是什么问题呢？
I have tried overflow: visible; 我试过overflow: visible; on hover and tooltiptext::after . 在悬停和tooltiptext::after 。 But the arrow remains disappeared. 但箭仍然消失了。
.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>
The tooltip should slidedown with arrow but with overflow: hidden property the tip disappear. 工具提示应该用箭头滑动但有溢出：隐藏属性，尖端消失。
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>
i wrapped the content in a div and applied after to this div ! 我把内容包装在一个div中，然后应用到这个div！
解决方案2
0 2019-06-11 10:03:57
The problem is your use of visibility property. 问题是您使用可见性属性。 just remove that from both both places you've defined it and your example will work. 只需从你定义它的两个地方删除它，你的例子就可以了。 visibility cannot be animated. 能见度无法动画。 try opacity instead if you need to 如果需要，请尝试不透明度
解决方案3
0 2019-06-11 10:04:26
One idea is to consider the arrow inside the height of the tooltiptext . 一个想法是考虑tooltiptext高度内的tooltiptext 。 To do this you can create the border using the other pseudo element then add more padding-top for the arrow: 为此，您可以使用其他伪元素创建边框，然后为箭头添加更多填充顶部：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.