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を試してください。