CSS: lien de l'image, changer de sur le vol stationnaire

J'ai une image qui est un lien. Je veux montrer une image différente lorsque l'utilisateur survole le lien.

Actuellement, je suis en utilisant ce code:

<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

Mais je vais avoir des tonnes de problèmes: la div n'est pas de ramasser les règles CSS (l'élément n'est tout simplement pas montrer la relative règles CSS quand je l'ai vue dans Firebug).

Peut-être que c'est parce que (comme je sais) c'est du code HTML non valide: vous ne pouvez pas mettre un <a> autour d'un <div>. Cependant, si je passe à <span> ensuite, il semble que je reçois plus de problèmes, parce que vous ne pouvez pas définir la hauteur et la largeur sur une plage de façon fiable.

Aider! Comment puis-je faire mieux?

InformationsquelleAutor AP257 | 2011-01-17
  1. 120
     <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

    utiliser une classe pour le lien lui-même et d'oublier les div

    .twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}
    • Comme l'image est téléchargée sur demande, la première fois que quelqu'un visite la page, il y aura une fraction de seconde où aucune image n'existe qu'une fois en vol stationnaire. Voulais juste signaler qu'il peut être indésirable pour certains.
    InformationsquelleAutor Caspar Kleijne
  2. 40

    Si vous avez quelques endroits où vous souhaitez créer cet effet, vous pouvez utiliser le code html suivant qui ne nécessite pas de feuille de style css. Il suffit de l'insérer.

    <a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" 
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>

    Assurez-vous d'écrire la citation des marques exactement comme ils le sont ici, ou il ne fonctionnera pas.

    • J'ai essayé et c'est assumer. Je comprends que c'est du JavaScript... Pourriez-vous veuillez me faire savoir comment cela peut être fait avec les CSS. Si possible j'ai besoin le code comme un exemple.
    InformationsquelleAutor Dave Loomis
  3. 6

    Qui pouvait être fait avec <a> seulement:

    #twitterbird {
 display: block; /* 'convert' <a> to <div> */
 margin-bottom: 10px;
 background-position: center top;
 background-repeat: no-repeat;
 width: 160px;
 height: 160px;
 background-image: url('twitterbird.png');
}
#twitterbird:hover {
 background-image: url('twitterbird_hover.png');
}
    • Tu veux dire quelque chose comme <a href="" id="twitterbird"></a>? Malheureusement, cela se traduit par une largeur et une hauteur de 0 (même avec les classes CSS vous proposer) dans Chrome.
    • bon, si je cherche une page de test avec votre suggestion, il affiche... alors pourquoi ai-je eu une hauteur et une largeur de 0 sur ma "vraie" page? J'ai essayé de réglage height: 160px ! important mais il n'aide pas...
    • ...d'expliquer: dans les Outils de développement Chrome, tous les styles ci-dessus montrent sous Harmonisé les Règles", mais ensuite dans le "Calculée Style' de la section, la hauteur et la largeur sont égales à zéro! Pour aucune raison apparente. Pourquoi?
    • J'ai créé une nouvelle question: stackoverflow.com/questions/4717673/...
    InformationsquelleAutor Floern
  4. 6

    Le problème avec l'évolution de la via JavaScript ou CSS, c'est que si vous avez une connexion plus lente, l'image prend une seconde pour changer de la planait version. Cela va entraîner un indésirable flash que l'on disparaît, tandis que les autres téléchargements.

    Ce que j'ai fait auparavant, c'est avoir deux images. Puis masquer et afficher chaque fonction de l'état de pointage. Ceci permettra de nettoyer basculer entre les deux images.

    <a href="/settings">
    <img class="default" src="settings-default.svg"/>
    <img class="hover" src="settings-hover.svg"/>
    <span>Settings</span>
</a>

a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}
    • Belle solution de facilité.
    InformationsquelleAutor Chris Smith
  5. 4

    Il peut être préférable si vous définissez un élément de cette façon

    display:block;

    puis par les sprites css définir votre arrière-plan, la

    Edit: cochez cette exemple http://jsfiddle.net/steweb/dTwtk/

    • Merci - je vais utiliser des sprites une fois que j'ai travaillé sur la façon d'obtenir de l'élément lui-même l'affichage avec un zéro de largeur.
    • Si vous réglez display:block, vous devez définir une largeur fixe/hauteur de la <a> élément 😉
    • aussi, consultez cet exemple out jsfiddle.net/steweb/dTwtk ..il va vous aider 😉
    InformationsquelleAutor stecb
  6. 3

    Vous pouvez faire ce qui suit, sans avoir besoin de CSS...

    <a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>

    Exemple: https://jsfiddle.net/jord8on/k1zsfqyk/

    Cette solution était PARFAIT pour mes besoins! J'ai trouvé cette solution ici.

    Avertissement: Avoir une solution qui est possible sans CSS est important pour moi parce que j'ai de la conception de contenu sur le Jive-x nuage plate-forme communautaire qui ne nous donne pas accès aux CSS.

    InformationsquelleAutor jord8on
  7. 0

    Si vous donnez donnent généralement un span la propriété display:block, il va ensuite se comporter comme un div, j'.e vous pouvez définir la largeur et la hauteur.

    Vous pouvez également ignorer les div ou span et il suffit de régler le a le display: block et appliquer le backgound style.

    <a href="" class="myImage"><!----></a>


    <style>
      .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
    </style>
    InformationsquelleAutor wosis
  8. 0
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
    .card {
        width: 130px;
        height: 195px;
        background: url("../images/pic.jpg") no-repeat;
        margin: 50px;
    }
    .card:hover {
        background: url("../images/anotherpic.jpg") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>
    InformationsquelleAutor Lokesh Thakur