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

Question

我的JSP页面上有一个简单的链接，如下所示。

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

它显示一个图标，当鼠标悬停在它上面时，它会显示一个带有另一个图标的工具提示，如下图所示。

工具提示显示在上述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;
}

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

Answer 1

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