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

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伪类更简单,移动更有效.我在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>?