javascript - 在另一个元素的鼠标悬停时更改 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，然后对该元素进行操作。提醒一下，元素必须具有唯一的 ID。