[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:
    18 360
    J'aime reçus:
    0
    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 711
    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 "-".