Soulignant en Javascript?

Sur le fait que vous ne pouvez pas avoir une ligne pseudoclass -- Comment écrire un:hover en CSS? -- je l'ai regardé en avoir Javascript faire le même travail avec la onMouseOver et onMouseOut événements pour simuler la :hover pseudoclass. Je suis en train de supprimer le soulignement du texte lorsque la souris est au-dessus d'elle. Est-il un extrait de code de Javascript quelqu'un peut offrir qui peut le faire?

J'ai essayé onMouseOver="this.style.textDecoration="none"", mais je pense que le contraste citations sont à jeter le tout hors tension.

Des idées?

Note: malheureusement, cet effet doit être réalisé sans l'utilisation d'un support externe ou interne de la feuille de style (inline seulement).

  • Êtes-vous sûr que vous ne pouvez pas utiliser un style élément? Les gens pensent souvent que parce qu'ils ne peuvent pas affecter le head élément. Mais style fonctionne réellement à l'intérieur de body trop (même si formelle de la syntaxe HTML interdit).
InformationsquelleAutor Code Monkey | 2012-10-28
  1. 7

    vous pouvez le faire en

     onMouseOver="this.style.textDecoration='none';"
    • Cela fonctionne, mais j'ai aussi trouvé que le point-virgule est inutile. Est-ce juste une bonne habitude de codage?
    • Il est bon de codage habitude, mais pour une déclaration qu'il n'est pas nécessaire. Vous pouvez également faire onMouseOver='this.style.textDecoration="none";' (à l'inverse de citations) si vous préféré
    • Javascript fonctionne sans points-virgules à la fin des instructions. Mais passer de l'un à marquer explicitement la fin de déclarations est toujours une bonne pratique.
    • vous devez utilisez le point-virgule, c'est une bonne habitude de codage.
    • je suis sûr que vous lisez le vol7ron et techfoobar conseils
    • Vous pouvez même le faire onMouseOver="this.style.textDecoration="none";" mais c'est seulement faire de la bête. Vraiment, une solution alternative serait l'idéal, de préférence à l'aide du traditionnel CSS.

    InformationsquelleAutor NullPoiиteя
  2. 4

    Voici votre réponse:

    <a onmouseover="this.style.textDecoration='none';"  onmouseout="this.style.textDecoration='underline';">hover me</a>


    si vous êtes en mesure d'utiliser jQuery, il serait plus facile. Il suffit d'écrire une fois le code suivant. Vous n'avez pas à changer votre balisage ensuite.

    <script type="text/javascript">
(function($) {
    $( function() {
        $('a').hover(
            function() {
                $(this).css('text-decoration','none');
            },
            function() {
                $(this).css('text-decoration','underline');
            }
        )
    } );
} (jQuery));
</script>
    InformationsquelleAutor bukart
  3. 1

    Je pense que vous ne devriez pas utiliser javascript, mais le CSS:

    .underlineHover:hover {
    text-decoration: underline;
}
    <span class="underlineHover">Content</span>

    Note: j'ai utilisé la classe underlineHover, mais sachez que les classes devraient avoir une signification sémantique plutôt de style une.

    InformationsquelleAutor Oriol