gpt4 book ai didi

html - 在气泡工具提示周围添加阴影

转载 作者:太空宇宙 更新时间:2023-11-03 18:34:32 27 4
gpt4 key购买 nike

我在我的应用程序中实现了气泡工具提示。我编写了这个用于创建它的 CSS:

 .tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent #E5E4E2;
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 155px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: #fff;
background: #E5E4E2;
border-radius: 5px;
color: #666;
width: 150px;
left: 160px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}

HTML代码:

 <a href="#" alt="Please Enter Name" class="tooltipDemo">   
<asp:ImageButton ID="ImageButton19" runat="server"
ImageUrl="Images/customer-logo-01.jpg" />

</a>

我可以显示工具提示,但我希望工具提示周围有阴影。我需要对当前的 CSS 进行哪些更改?

最佳答案

您需要在希望出现阴影的位置添加 CSS3 box-shadow。在你的情况下

.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
}

关于html - 在气泡工具提示周围添加阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19049470/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com