1

我在我的应用程序中实现了一个气泡工具提示。我编写了这个 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 中做哪些更改？

4

2 回答 2

0

改变你.tooltipDemo:hover:after的

.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;
    -webkit-box-shadow: 0px 0px 5px black;
    box-shadow: 0px 0px 5px black; /*This line added*/
}

看看这个工作小提琴

于 2013-09-27T11:29:00.027 回答
0

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

.tooltipDemo
        {           
            position: relative;
            display: inline;
            text-decoration: none;
            left: 5px;
            top: 0px;
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);     
        }
于 2013-09-27T11:25:51.917 回答