在 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.*/
}

实际显示tooltip的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

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