-1

これが私が持っているものです。マウスが上にある1つのスパンだけが赤に変わると思いましたが、マウスを上に置くと、すべて赤に変わります

<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>

独自のマウスオーバー イベントで各スパンを変更するにはどうすればよいですか?

4

4 に答える 4

6

この目的で 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>​
于 2012-12-13T03:38:33.160 に答える
1

あなたのコードは機能します。問題は、span内部に他のものがあることですspan。

1 つ追加してから別のものを追加する必要が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>

デモ

于 2012-12-13T03:37:37.383 に答える
0

このコードを参照してください... (コードで組み立てます)

<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>
于 2012-12-13T04:00:01.543 に答える
0

:hover 属性を持つ CSS でこれを行うことができるはずですが、本当に JavaScript を使用したい場合は、個々の要素にイベントを添付するだけです。これは非常に簡単な例です。

スパン要素に次のようなものを使用させるだけです
var spans = document.getElementsByTagName('span');

それらを選択し、イベントを適用してそれらをループします。

ここに例があります： http://jsfiddle.net/tate/ztgRL/9/

于 2012-12-13T03:48:08.733 に答える