[Besoin d'aide] Effet de rollover

[Jrman]

Bonjour à tous,

Je désirerai appliquer un effet de rollover, plus précisément, un changement d'aspect d'un élément au survol.

Seulement, après avoir essayé plusieurs méthodes, aucune ne fonctionne.

J'ai récup' l'ID dans le code source de ma page qui correspond à l'élément auquel je souhaite appliquer une image de fond au survol de la souris, j'ai mis cet ID dans ma feuille de style CSS (je suis sous Wordpress), et j'ai ainsi appliqué les modifications voulus, mais après plusieurs tentatives, je n'ai rien. Voici ci-dessous quelques exemples de code que j'ai mis :

(Prenons l'exemple avec ma page "Vidéos" de la barre de navigation de mon site web.)

Code (HTML) source de ma page :

<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://urldemonsite/?page_id=33">Vidéos</a></li>

Code CSS que je met dans ma feuille de style (tout en bas) :

.menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }

[b]#[/b]menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }

.menu-item-58 ul li a:hover { background-image:url([b]'[/b]images/monimage.png[b]'[/b]); background-repeat:no-repeat; }

.[b]page[/b]-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }

[b]#[/b]menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }

[b]#[/b]menu-item-58 a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }

Bref, je ne vais pas énumérer les diverses méthodes que j'ai essayées -)), mais je n'ai aucun changement. Même en essayant de mettre un "background-color" à la place d'une image, je n'ai rien.

Donc si une personne pouvait me venir en aide, ce serait parfait.

Pour l'URL de mon site web, me contacter par MP.

Merci à vous,

Jrm

 

[Marie-Aude]

Généralement les aides données sur un forum profitent à la communauté... là c'est du conseil en direct pour toi tout seul, tu veux qu'on t'aide, mais surtout pas indiquer ton site

 

[Jrman]

Bonsoir Marie-Aude,

En fait si je ne désire pour le moment pas partager l'URL de mon site web, c'est tout simplement parce que celui-ci est en pleine construction.

Par la suite, une fois que j'aurais obtenu un coup de main de la part d'une personne, et une fois l'effet voulu mis en place, je partagerai volontiers à la communauté, sous forme de tutoriel par exemple, la procédure à suivre pour obtenir cet effet.

Cordialement,

Jrm

 

[MikeR]

Je ne suis pas un spécialiste des css, mais il faudrait au moins :
- être cohérent (item-60 ou bien item-58?)
- définir un style dans le cas non-hover
-voir si il ne faut pas virer les "-" dans les nom de classe. Mon éditeur de css, il aime pas.

<ul class="menu">
<li id="menu-item-60" class="item60"><a href="http://urldemonsite/?page_id=33">Vidéos</a></li>

.menu  .item60 { <background-image:url(images/monimage.png); background-repeat:no-repeat;}

.menu  .item60-hover { background-image:url(images/mon_autre_image_pour_survol.png); background-repeat:no-repeat;}

 

[Jrman]

Je ne suis pas un spécialiste des css, mais il faudrait au moins :
- être cohérent (item-60 ou bien item-58?)
- définir un style dans le cas non-hover
-voir si il ne faut pas virer les "-" dans les nom de classe. Mon éditeur de css, il aime pas.

<ul class="menu">
<li id="menu-item-60" class="item60"><a href="http://urldemonsite/?page_id=33">Vidéos</a></li>

.menu  .item60 { <background-image:url(images/monimage.png); background-repeat:no-repeat;}

.menu  .item60-hover { background-image:url(images/mon_autre_image_pour_survol.png); background-repeat:no-repeat;}

D'abord, merci pour ta réponse.

Effectivement, petite faute de ma part. Il s'agit bien de l'item "60".
J'ai bien essayé de mettre les codes que tu m'as donnés, mais rien. Même en virant les "-".