javascript - 如何更改鼠标悬停时跨度标签的颜色，但仅更改鼠标悬停的跨度标签？

Question

这就是我所拥有的，我认为它只会变成红色，鼠标经过的那个跨度，但是一旦你把鼠标放在上面，它们都会变成红色

<p><span onmouseover="this.style.background='red'" title="大地(Daichi) ground/earth/the solid earth/the  land">(大地)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="が(ga) indicates sentence subject / indicates possessive /  but/however/still/and">(が)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="揺れ(Yure) vibration/flickering/jolting/tremor">(揺れ)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="始め(Hajime) beginning/start/outset/opening/  first / origin/  such as .../not to mention ...">(始め)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="、(、) Japanese comma">(、)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="警報(Keihou) alarm/warning">(警報)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="が(ga) indicates sentence subject / indicates possessive /  but/however/still/and">(が)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="鳴り(Nari) ringing/sound">(鳴り&nbsp;&nbsp;&nbsp;</span>)(<span onmouseover="this.style.background='red'" title="響い(Hibii) no dictionary result, likely a conjigated verb">響い</span>)&nbsp;&nbsp;&nbsp;<span onmouseover="this.style.background='red'" title="た(ta) indicate past completed or action/ indicates light imperative">(た&lt;/span>)</p>

如何在自己的鼠标悬停事件上更改每个跨度？

Answer 1

为此目的使用 CSS :hover 伪类更简单、更高效。我在 JSFiddle 中准备了一个示例：

<style>
span:hover {
  background: yellow;
}
</style>
<span>I think</span>
<span>that</span>
<span>I shall</span>
<span>never</span>
<span>see</span>
<br>
<span>a poem as lovely</span>
<span>as</span>
<span>a tree</span>​

Answer 2

你的代码有效，问题是你有一个span内部其他span等等。

您应该先添加一个span，然后再添加另一个，因此当您将鼠标移过第一个span时，看起来一切都变红了，因为它们在里面。

<p>
    <span onmouseover="this.style.background='red'" title="大地(Daichi) ground/earth/the solid earth/the  land">(大地)&nbsp;&nbsp;&nbsp;</span>
    <span onmouseover="this.style.background='red'" title="大地(Daichi) ground/earth/the solid earth/the  land">(大地)&nbsp;&nbsp;&nbsp;</span>
</p>

演示

Answer 3

您应该能够使用带有 :hover 属性的 CSS 来执行此操作，尽管如果您真的想使用 javascript 简单地将事件附加到单个元素。这是一个非常简单的例子。

只需让您的跨度元素使用类似的东西
var spans = document.getElementsByTagName('span');

选择它们并循环通过它们应用事件。

这是示例：http: //jsfiddle.net/tate/ztgRL/9/

Answer 4

请参阅此代码...（与您的代码组装）

<p>
<span onmouseover="this.style.background='green'" title="??(Daichi) ground/earth/the solid earth/the  land">
(??)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="?(ga) indicates sentence subject / indicates possessive /  but/however/still/and">
(?)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="??(Yure) vibration/flickering/jolting/tremor">
(??)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="??(Hajime) beginning/start/outset/opening/  first / origin/  such as .../not to mention ...">
(??)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="?(?) Japanese comma">
(?)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="??(Keihou) alarm/warning">
(??)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="?(ga) indicates sentence subject / indicates possessive /  but/however/still/and">
(?)</span>&nbsp;&nbsp;&nbsp;
<span onmouseover="this.style.background='red'" title="??(Nari) ringing/sound">
(??)</span>&nbsp;&nbsp;&nbsp;
</p>