最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how do i change the color of a span tag on mouse over, but only the span tag that the mouse is over? - Stack Overfl

programmeradmin1浏览0评论

here is what i have, i figured it would only change red, the one span that the mouse is over, but once you put the mouse over, they all change red

<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 ma">(、)&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 pleted or action/ indicates light imperative">(た</span>)</p>

how do i make each span change on its own mouseover event?

here is what i have, i figured it would only change red, the one span that the mouse is over, but once you put the mouse over, they all change red

<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 ma">(、)&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 pleted or action/ indicates light imperative">(た</span>)</p>

how do i make each span change on its own mouseover event?

Share Improve this question asked Dec 13, 2012 at 3:32 user1397417user1397417 7384 gold badges12 silver badges37 bronze badges 2
  • if you can use jQuery, this is trivial – kennypu Commented Dec 13, 2012 at 3:34
  • 1 You shouldn't use javascript for this; you should use CSS instead. – Nightfirecat Commented Dec 13, 2012 at 3:45
Add a ment  | 

4 Answers 4

Reset to default 6

It is simpler and move efficient to use the CSS :hover pseudoclass for this purpose. I have prepared 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>​

Your code works, the problem is that you have a span inside other span and so on.

You should add one span and then other, so when you pass the mouse over the first span it looks like all gets red because they are inside.

<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

You should be able to do this with CSS with the :hover attribute although if you really want to use javascript simple attach an event the the individual element. here is a very simple example.

simply make your span elements use something like
var spans = document.getElementsByTagName('span');

to select them and loop through them applying the event.

here is the example: http://jsfiddle/tate/ztgRL/9/

See this code... (assemble with your code)

<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 ma">
(?)</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>
发布评论

评论列表(0)

  1. 暂无评论