javascript - onmouseover ="this.style... is working but I need something like onmouseover="this.child.child

Question

应该很容易，但我无法让它工作。如标题中所述，我想将 onmouseover 的背景颜色从 span.name(橙色)更改为

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.style.backgroundColor = 'yellow'"; onmouseout="this.style.backgroundColor = 'green'"; >
    <span class="pdf-style">
        <span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
    </span>
</div>

我找到了这个但是无法让它工作 Get Element By using Class name

这就是我正在尝试的:fiddle is here

它只需要在 FF 中工作

感谢您的帮助!

Answer 1

您正在寻找这样的东西:

onmouseover="this.childNodes[1].childNodes[1].style.background='green'";

虽然这很丑陋，但更好的解决方案是

span.name:hover {
    background:green;
}

在 CSS 中。

---

解释JS，以防有帮助:

this.childNodes

获取 this 的所有子项的列表。

索引 [0] 处的第一个是文本节点(换行符)。

第二个，在索引 [1] 处是您要查找的跨度。

然后，对该跨度执行相同的操作。