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.