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">(た</span>)</p>

如何在自己的鼠标悬停事件中更改每个范围？

Answer 1

为此目的使用CSS：hover伪类更简单，更有效。我准备了an example in 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>

demo

Answer 3

你应该可以使用带有：hover属性的CSS来做到这一点，尽管如果你真的想要使用javascript简单附加一个事件的单个元素。这是一个非常简单的例子。

简单地让你的span元素使用类似的东西 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>

如何在鼠标悬停时更改span标记的颜色，但只更改鼠标结束的span标记？

4 个答案: