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

Question

我只是在现有代码中添加了一小段代码；在图像下方有一个文本。加上鼠标悬停在文本上应以蓝色突出显示。 对我有用的东西，但不知何故，文本和图像在鼠标悬停时移动到左侧。我真的不知道为什么。有人可以帮我吗。 图片在标签中。

<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;}">

帮助

hghlightBG 是我编写的 JS 函数，用于在鼠标悬停时使文本颜色变为蓝色。 这是我对现有标签所做的唯一修改。

JavaScript 代码:

function highlightBG(id,action) {   
    if(action==0)
    {
        document.getElementById(id).className='AttachOnMouseOverText';
    }
    else
    {
        document.getElementById(id).className='AttachOnMouseOutText';
    }
}

CSS 代码:

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

Answer 1

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

HTML:

<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>

CSS:

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

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