Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 17

Enregistré le: 20 Jan 2012

Message le Sam Mai 19, 2012 16:28

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.)
Image

Code (HTML) source de ma page :

Code: Tout sélectionner
<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) :

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

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

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

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

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

Code: Tout sélectionner
[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
Haut
4 Réponses
Messages: 18372

Enregistré le: 5 Juin 2006

Message le Sam Mai 19, 2012 18:02

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
Haut
Messages: 17

Enregistré le: 20 Jan 2012

Message le Sam Mai 19, 2012 21:18

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
Haut
Messages: 1697

Enregistré le: 9 Jan 2010

Message le Sam Mai 19, 2012 23:44

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.

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


Code: Tout sélectionner
.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;}
Haut
Messages: 17

Enregistré le: 20 Jan 2012

Message le Dim Mai 20, 2012 0:52

MikeR a écrit: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.

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


Code: Tout sélectionner
.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 "-".
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.