Je dois changer <img> URL source sur hover .
J'ai essayé mais ça ne marche pas :
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>CSS
#my-img:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}Toute aide serait appréciée.
Mise à jour :
Cela ne fonctionne que pour Webkit / Google Chrome.
Essayez ce code.
.card {
width: 200px;
height: 195px;
position: relative;
display: inline-block;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
width:200px;
}
.card:hover .img-top {
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Change on Hover with CSS</title>
</head>
<body>
<div class="card">
<img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">
<img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">
</div>
</body>
</html>
Voici une solution purement CSS. Mettez l'image visible dans la balise img, mettez la deuxième image comme arrière-plan dans le CSS, puis cachez l'image au survol.
.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but4 a:hover img{
visibility:hidden;
}
<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>
La meilleure façon de changer src pour l'image est :
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">Voir la démo en direct : http://www.audenaerde.org/csstricks.html#imagereplacecss
Profitez-en !
Il existe un autre moyen simple utilisant uniquement HTML et CSS !
Enveloppez simplement votre <img> avec div comme ceci :
<div class="image-wrapper">
<img src="http://dummyimage.com/100x100/000/fff">
</div>Ensuite, dans votre fichier CSS, cachez l'img et définissez l'image d'arrière-plan pour l'élément div qui enveloppe l'image :
.image-wrapper:hover {
background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
background-size: contain;
background-repeat: no-repeat;
}
.image-wrapper:hover img {
display: none;
}Et voilà !
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
