HTML CSS hover bouton de navigation

Question

J'utilise un bouton d'image pour la navigation, car je veux des effets de survol. Je veux dire, j'ai utilisé l'image du bouton au lieu du tag <ul> ou <div> parce que je veux des effets de survol, c'est-à-dire lorsque je passe la souris sur cette image, l'image change. C'est pourquoi j'utilise le bouton image.

Mais, je ne veux pas utiliser d'images. Je veux utiliser la balise <ul> et la balise <div> mais je ne suis pas familier avec la façon de faire un effet de hover sur ces balises.

S'il vous plaît aidez-moi.

Answer 1

Vous devez utiliser CSS pour cela. Si vous souhaitez avoir une liste de boutons, alors je vous suggère fortement d'utiliser un élément parent ul, puis des éléments fils li. N'utilisez pas de divs à l'intérieur de l'ul.

<ul> 
    <li id='button1'>Button 1</li> 
    <li id='button2'>Button 2</li> 
</ul> 

#button1 {background-image: url(IMAGE PATH GOES HERE)} 
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)} 

La propriété CSS background-image lieux image quelconque que vous spécifiez dans IMAGE PATH ICI GOES comme l'arrière-plan de cet élément. Le pseudo-sélecteur: hover vous permet de modifier une image lorsque l'utilisateur la survole avec sa souris. Dans ce cas, nous fournissons un chemin d'image différent qui modifie efficacement l'image lorsque le li est plané.

Si vous n'êtes pas familier avec CSS, you can learn more about it here.

Answer 2

Tous les navigateurs modernes peuvent rendre le sélecteur CSS :hover sur chaque élément. Vous avez juste à changer background-image propriétés pour vos tags <ul> puis.

Mais il existe de nombreuses possibilités avec javascript, jquery et ainsi de suite, qui vous permettront de l'utiliser dans tous les navigateurs.

Answer 3

Je ne sais pas si je comprends bien, mais si je le fais est la suivante:

ul:hover 
{ 
background-color: #f00; 
} 

ou

div:hover 
{ 
background-color: #f00; 
} 

A propos aussi bonne réponse que je peux donner examiner la question.