Quelle est la manière la plus simple d'implémenter le changement de couleur d'arrière-plan mouseover pour les éléments HTML?

Question

I les styles suivants:

a.button { 
    background-color: orange; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.buttonMouseover { 
    background-color: darkGoldenRod; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

Et le code javascript suivant (mon premier btw):

function backgroundChangeIn(element){ 
    if (element.className = "a.button"){element.className = "buttonMouseover";} 
} 
function backgroundChangeOut(element){ 
    if (element.className = "a.buttonMouseover"){element.className = "button";} 
} 

Et, l'élément suivant qui devrait changer l'arrière-plan sur mouseover:

<a class="button" href="" onmouseover="backgroundChangeIn(this)" onmouseout="backgroundChangeOut(this)">A Button</a> 

Ça marche pour moi jusqu'à maintenant. Mais je me demandais s'il y avait un meilleur moyen.

(Désolé tout le code)

Answer 1

En fonction de vos navigateurs cibles, vous pouvez utiliser la balise hover pseudo.

a.button { 
    background-color: orange; 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.button:hover { 
    background-color: darkGoldenRod; 
} 

est ici un peu de documentation sur elle à w3schools. On dirait qu'il est bien pris en charge sur tous les navigateurs modernes à distance.

Notez que les règles de style normal et de vol stationnaire sont appliquées, le vol stationnaire ayant la priorité. Donc, vous avez juste besoin de mettre ce qui change dans la règle de vol stationnaire.

Answer 2

a.button, a.button:hover { 
    margin: .2cm; 
    padding: .2cm; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
    border: solid #000000; 
} 

a.button { 
    background-color: orange; 
} 

a.button:hover { 
    background-color: darkGoldenRod; 
} 

Et:

<a class="button" href="">A Button</a> 

Answer 3

Vous pouvez utiliser une bibliothèque comme jQuery pour rendre les choses plus simples.

Answer 4

sblundy a les bases de droite. Pour ajouter à cela, tous les navigateurs modernes vous permettront d'utiliser l'élément pseudo hover sur le <un> mais IE6 ne le reconnaîtra pas sur un autre élément.

Dans IE6, vous auriez besoin d'une sorte de JavaScript pour ajouter un nom de classe lorsque vous passez la souris. J'aime utiliser jQuery, et la façon dont je le ferais comme ça se présente comme suit:

$(function(){ 
    $('.hoverable').hover(function(){ 
    $(this).addClass('hover'); 
    }, 
    function(){ 
    $(this).removeClass('hover'); 
    }) 
}) 

qui donnerait tous les éléments de la classe « hoverable » une classe de vol stationnaire quand ils sont survolaient.