在HTML提交按钮的鼠标悬停上显示工具提示

问题描述：

我的JSP页面上有一个简单的链接，如下所示。在HTML提交按钮的鼠标悬停上显示工具提示

<a href="" title="Press the button to delete the row." class="icon-2 info-tooltip"></a>

它显示的图标，并且当鼠标悬停在它时，它显示与另一图标的工具提示作为显示在下面的快照。

enter image description here

该工具提示在上述HTML表格的最后一列的最后一行显示。

显示默认图标的css类如下。

a.icon-2  
{ 
    background: url(../images/table/table_icon_2.gif) no-repeat; 
    display: block; 
    float: left; 
    height: 24px; 
    margin: 0 8px 0 0; 
    width: 24px; /*Displays a default icon*/ 
}

当鼠标悬停在链接上时，默认图标被替换为以下css类。

a:hover.icon-2 
{ 
    background: url(../images/table/table_icon_2.gif) 0 -24px; 
    /*Displays icon on mouse hover.*/ 
}

和实际显示工具提示的css类如下。

#tooltip  
{ 
    background-color: #8c8c8c; 
    border: 1px solid #767676; 
    color: #fff; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: normal; 
    opacity: 0.85; 
    padding: 0 5px; 
    position: absolute; 
    text-align: left; 
    z-index: 3000; 
}

现在，我需要显示与HTML相同的图标相同的工具提示鼠标悬停<input type="submit">提交按钮。它如何显示？

同样的方法，但使用CSS选择器来提交''按钮而不是'a'链接... – 2012-02-29 00:09:59

答

而不是a:hover.icon-2，请尝试.icon-2:hover。

在HTML提交按钮的鼠标悬停上显示工具提示

相关推荐