Le Style CSS: Comment changer l'image quand elle survole?

Je suis en train de faire un vol stationnaire effet sur une image lorsqu'il est survolé, il va passer à une autre image. Je n'arrive pas à le faire fonctionner quand je ne suis pas à l'aide de la balise d'ancrage. Mon but est d'avoir le changement d'image quand j'ai passez la souris sur un bouton, qui, je crois, besoin de quelques jQuery magie. Voici mon code pour essayer de changer l'image quand planait au-dessus mais de toute façon pas de travail. Ai-je raté quelque chose?

HTML
<div>
<img src="images/newpic.png" class="img-circle homeimage" alt="Responsive image"/> 
</div>

CSS
.homeimage {
    height:200px;
    width: auto;
    background-image: url('../images/newpic.png');
}

.homeimage:hover {
    background-image: url('../images/funnypic.png');
}
  • Vous pouvez l'atteindre sans jquery
  • vous voulez changer le hover image d'arrière-plan ou une image dans le html ?
  • pourquoi u placer les images dans le html et un fond en css.
  • double possible de le Changement d'image sur hover en css/html
InformationsquelleAutor TL12321 | 2015-02-23
  1. 2

    Cela ne marchera pas parce que vous mettez la classe sur une balise d'image essayez de faire l'img dans un div et de lui donner une hauteur et une largeur de vérifier cette js fiddle

    CSS:

    .container{
    width 100%;
    height: 500px;
}

.picture {
    height:500px;
    width: 500px;
    background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
    background-repeat:no-repeat;
}

.picture:hover {
    background-image: url('http://www.online-image-editor.com//styles/2014/images/example_image.png');
}

    HTML:

    <div class="container">
    <div class="picture">
        
    </div>
    
</div>

    http://jsfiddle.net/kriscoulson/a0dodtjn/1/

    InformationsquelleAutor Enjayy
  2. 2

    voici un exmple à l'aide de Jquery : cela vous permet d'utiliser hover avec un image balise quel que soit le conteneur :

    Jquery

    $(document).ready(function () {
    $('.imgh')
        .mouseover(function () {
        $(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg");
    })
        .mouseout(function () {
        $(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
    });
});

    HMTL

    <img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="rajkumar" class="imgh"></img>

    Démonstration En Direct

    • Merci beaucoup! Pour une raison que tout le css options n'ont pas de travail, mais le jQuery a travaillé comme un charme. jQuery magie trop fort.
    InformationsquelleAutor Ze Rubeus
  3. 1

    Vous pouvez être résolu seulement avec les CSS.

    HTML

    <img class="img-circle homeimage" alt="Responsive image"/>

    CSS

    .homeimage {
    height:200px;
    width: auto;
    background: url('https://www.google.co.kr/images/hpp/lightbulb-icon-39x39.png') no-repeat;
}

.homeimage:hover {
    background: url('http://www.google.com/images/logos/url_shortener_logo.gif') no-repeat;
}

    DÉMO : http://jsfiddle.net/ymyL949n/

    InformationsquelleAutor Stella
  4. 1

    Si vous souhaitez modifier l'img qui est appelé à partir du html, vous pouvez essayer cette solution sans jquery et javascript. http://jsbin.com/sujigakeru/8/edit

    HTML 

     <div class="container">

    <div class="content">
      <img src="http://www.makemenoise.com/wp-content/uploads/2012/08/wordpress-logo-200x200.png" alt="Responsive image"/> 
    </div>

    <div class="hover">
      <img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" alt="">
    </div>

  </div>

    CSS 

    .container{
  width:200px;
  height:200px;
  position:relative;

}
.hover{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.container:hover .hover{
  display:block;
}
    InformationsquelleAutor PRAH
  5. 1

    Vous pouvez atteindre cet objectif en utilisant le css aussi. vous avez besoin de changer l'image d'arrière-plan sur le vol stationnaire d'un bouton:

    CSS:

    img {
    display:block;
    width:400px;
    height:300px;
    background-image:url("http://lorempixel.com/600/200/sports/1/")
}
.css:hover ~ img {
    background-image:url("http://lorempixel.com/600/200/sports/2/")
}

<button class="css">CSS</button>
<img src="/image.png" />

    Assurez-vous que l'élément de maintien de l'ordre. Le bouton devrait venir en premier avant de l'image.

    Démo: http://jsfiddle.net/lotusgodkk/GCu2D/573/

    InformationsquelleAutor K K