[Besoin d'aide] Effet de rollover

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Jrman, 19 Mai 2012.

  1. Jrman
    Jrman Nouveau WRInaute
    Inscrit:
    20 Janvier 2012
    Messages:
    17
    J'aime reçus:
    0
    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.)
    [​IMG]

    Code (HTML) source de ma page :

    Code:
    <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:
    .menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }
    Code:
    [b]#[/b]menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }
    Code:
    .menu-item-58 ul li a:hover { background-image:url([b]'[/b]images/monimage.png[b]'[/b]); background-repeat:no-repeat; }
    Code:
    .[b]page[/b]-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }
    Code:
    [b]#[/b]menu-item-58 ul li a:hover { background-image:url(images/monimage.png); background-repeat:no-repeat; }
    Code:
    [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
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 928
    J'aime reçus:
    265
    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
     
  3. Jrman
    Jrman Nouveau WRInaute
    Inscrit:
    20 Janvier 2012
    Messages:
    17
    J'aime reçus:
    0
    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
     
  4. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 401
    J'aime reçus:
    0
    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:
    <ul class="menu">
    <li id="menu-item-60" class="item60"><a href="http://urldemonsite/?page_id=33">Vidéos</a></li>
    Code:
    .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;}
    
     
  5. Jrman
    Jrman Nouveau WRInaute
    Inscrit:
    20 Janvier 2012
    Messages:
    17
    J'aime reçus:
    0

    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 "-".
     
Chargement...
Similar Threads - [Besoin aide] Effet Forum Date
Problème référencement après 4 ans d'activité [Besoin d'aide] Problèmes de référencement spécifiques à vos sites 19 Mars 2014
Création d'un site web [besoin d'aide] Développement d'un site Web ou d'une appli mobile 27 Avril 2013
[besoin d'aide]htpasswd et htaccess c/o 1&1 Développement d'un site Web ou d'une appli mobile 25 Octobre 2011
[Besoin d'aide] Compte de résultat fiscal pour un webmaster Droit du web (juridique, fiscalité...) 29 Avril 2010
[besoin aide] petit code php Développement d'un site Web ou d'une appli mobile 22 Novembre 2006
Enlever le ? [besoin d'aide] URL Rewriting et .htaccess 31 Mars 2006
[besoin aide] script de soumision annu automatique Administration d'un site Web 8 Octobre 2005
[Besoin d'aide] Gros problème avec mes statistiques Administration d'un site Web 18 Mai 2005
[Besoin d'aide] Trafic/Hits... Administration d'un site Web 28 Avril 2005
Installation de Xoops sous linux[besoin d'aide] Administration d'un site Web 27 Juillet 2004
[AIDE] Diffuser des publicités vidéo (pre-roll) avec Ad Manager Monétisation d'un site web 12 Mai 2021
[AIDE] Statistiques page Facebook non accessibles Facebook 23 Décembre 2020
[Aide] convertir balise <iframe> en <object> Développement d'un site Web ou d'une appli mobile 10 Septembre 2015
[Aide] Recherche informations concernant un concours Débuter en référencement 4 Mai 2013
[Aide] Léger problème d'intégration... Développement d'un site Web ou d'une appli mobile 4 Mai 2012
[Aide] Comment être premier sur Youtube ? YouTube, Google Images et Google Maps 14 Janvier 2012
[AIDE] add_Organic Google Analytics 1 Octobre 2010
[Aide] 2 questions PHP Développement d'un site Web ou d'une appli mobile 6 Juin 2010
[AIDE] ".php" ajouté à la fin des fichiers, étrange... URL Rewriting et .htaccess 22 Avril 2010
[Aide] Analytics reste désepérément à ZERO ! Google Analytics 15 Décembre 2009