在另一个元素的鼠标悬停时更改span元素的CSS类

Question

我正在尝试在另一个元素悬停时更改span元素的css类。了解我的意思。加载你的Facebook并将鼠标悬停在主要的新闻源帖子上，右上角会出现小的向下箭头。

这就是我想要创造的效果。 到目前为止，我有：

<li id="unique" class="message"><a href="javascript:void(0)" onMouseOver="(MC.className='messageControls')" onMouseOut="(MC.className='hidden')" onclick="callTheFunction();"></li>

<span id="MC" class="hidden">hksdjhkjsdhfkjhsdkjh</span>

但这不起作用。有什么指针吗？我不想使用任何框架/库，如jQuery。

Answer 1

您的on..事件处理程序没有MC的概念。试试这样：

... onMouseOver="document.getElementById('MC').className='messageControls'" ...

这样，您可以使用id属性“查找”元素，其值为MC，然后对该元素执行操作。作为remdinder，元素必须具有唯一的ID。