¿cómo puedo cambiar el color de una etiqueta span en el mouse encima, pero sólo la etiqueta span de que el ratón está encima?

aquí es lo que tengo, pensé que lo único que haría sería cambiar el rojo, el lapso que el ratón por encima, pero una vez que pones el ratón por encima, de que todo cambie rojo

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

¿cómo puedo hacer que cada palmo de cambio en su propio evento mouseover?

si usted puede usar jQuery, esto es trivial
Usted no debe usar javascript para esto; usted debe utilizar CSS en lugar.

OriginalEl autor user1397417 | 2012-12-13

4 Kommentare

  1. 1

    El código funciona, el problema es que tiene un span dentro de otros span y así sucesivamente.

    Debe agregar uno span y luego otro, así que cuando se pasa el ratón sobre la primera span parece que todo se pone de color rojo, porque ellos están en el interior.

    <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

    Por qué voto ?
    Debe agregar onmouseout demasiado, para volver al estado anterior

    OriginalEl autor Ricardo Alvaro Lohmann

  2. 6

    Es más simple y mover eficaz el uso de la CSS :hover pseudoclass para este propósito. He preparado un ejemplo en 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>
    Sí, pase el ratón es sin duda la mejor manera de hacerlo. JavaScript es innecesario aquí.
    No funciona en IE afair.

    OriginalEl autor Dominic Cooney

  3. 0

    Usted debe ser capaz de hacer esto con CSS con el :hover atributo pero si usted realmente desea utilizar javascript simple adjuntar un evento en el que el elemento individual. aquí es un ejemplo muy simple.

    simplemente haga sus elementos span usar algo como

    var spans = document.getElementsByTagName('span');

    para seleccionar y bucle a través de ellos aplicando el evento.

    aquí está el ejemplo:
    http://jsfiddle.net/tate/ztgRL/9/

    OriginalEl autor Daniel Tate

  4. 0

    Ver este código… (montaje con su código)

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

    OriginalEl autor RAKESH HOLKAR

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...