Javascript 鼠标悬停时，我的文本和图像以一种奇怪的方式在左侧移动

我只是在现有代码中添加了一个小代码；在图像下面有一个文本。加上鼠标上的文字应以蓝色突出显示。 这些东西对我来说很有用，但不知怎么的，文本和图像在鼠标上方移到了左侧。我真的不知道为什么。有人能帮我吗。 图像在标签中

<td align="right" valign="bottom" id="helpid">
<a href="javascript: void(null)" onClick="if(legendDIV.style.visibility=='visible') { legendDIV.style.visibility='hidden'; isClickonLegend = 1; } else { legendDIV.style.visibility='visible'; isClickonLegend = 1;}">

CSS代码：

.AttachOnMouseOverText{
    color: blue;        
    font-size: 9px;
    text-align: center;
}
.AttachOnMouseOutText{
    color: black;       
    font-size: 9px;
    text-align: center;     
}

---

我猜至少有一部分是因为你改变了字体大小。 还有一件事，当您使用javascript更改样式时，请始终尝试检查是否可以直接使用css选择器进行更改

HTML:

---

通过这种方式，您可以设置默认显示，并且只更改一个参数。

提供您的css。代码如下：
Help@Vasu：最好编辑主要问题……Javascript:function highlightBG（id，action）{if（action==0）{document.getElementById（id）.className='AttachOnMouseOverText'；}else{document.getElementById（id）.className='AttachOnMouseOutText'；}}您的css似乎很好。我认为您的legendDiv htmlI中有问题。我尝试了您的代码Gil，但它在鼠标上方没有显示为蓝色：（css:.helpid{color:black；字体大小：10px；文本对齐：居中；}.helpid:hover{color:blue；}HTML:
HelpYou编写的。helpid使选择器可以查找该名称的类。在我的代码中，可以看到我使用了#helpid，使选择器可以按ID名称查找元素。此外，“a”元素可能与另一个css选择器有样式冲突，因此您也可以添加它。将两个选择器更改为该名称，它将不可用rk:#helpid，#helpid a{…}#helpid:hover，#helpid:hover a{…}你知道吗-这对我有用..谢谢你的大力帮助。

.AttachOnMouseOverText{
    color: blue;        
    font-size: 9px;
    text-align: center;
}
.AttachOnMouseOutText{
    color: black;       
    font-size: 9px;
    text-align: center;     
}

<table>
    <tr>
    <td align="right" valign="bottom" id="helpid">
        <a href="javascript: void(null);" onClick="{...}">
        <img src="#ContactsImagePath#qmark_sm.gif" border="0" alt="Help">
        </a>
        <br>Help
    </td>
    </tr>
</table>

#helpid {
    color: black;
    font-size: 9px;
    text-align: center;
}
#helpid:hover {
    color: blue;
}