CSS: cambia l'immagine src su img: hover

Devo modificare l' <img>URL di origine su hover.

L'ho provato ma non funziona:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Qualsiasi aiuto sarebbe apprezzato.

Aggiornare:

Funziona solo per Webkit / Google Chrome.

Con solo html e css, non è possibile modificare lo src dell'immagine. Se sostituisci il tag img con il tag div, potresti essere in grado di cambiare l'immagine impostata come sfondo come simile

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

E se pensi di poter utilizzare del codice javascript, dovresti essere in grado di modificare l'src del tag img come di seguito

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Ho modificato alcune modifiche relative a Patrick Kostjens.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Ho avuto un problema simile ma la mia soluzione era di avere due immagini, una nascosta (display: nessuna) e una visibile. Al passaggio del mouse su un arco circostante, l'immagine originale cambia in display: none e l'altra immagine da visualizzare: block. (Potresti usare "inline" invece a seconda delle circostanze)

Questo esempio utilizza due tag span invece delle immagini in modo da poter vedere il risultato quando lo si esegue qui. Sfortunatamente non avevo alcuna fonte di immagini online da utilizzare.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

Quello che potresti fare è imbrogliare un po 'impostando widthe heightsu 0 per nascondere l'immagine reale e applicare un po' di CSS per fare quello che vuoi:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

E l'imbottitura che rende il imgtag della dimensione che vuoi che abbia (la metà della dimensione dell'immagine reale).

Violino

Ecco un approccio alternativo che utilizza CSS puro. L'idea è di includere entrambe le immagini nel markup HTML e di visualizzarle o nasconderle di conseguenza su: hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Si noti che le immagini utilizzate hanno le stesse dimensioni per una corretta visualizzazione. Inoltre, le dimensioni di questi file di immagini sono piuttosto piccole, quindi il caricamento di più immagini non è un problema in questo caso, ma potrebbe esserlo se stai cercando di attivare o disattivare la visualizzazione di immagini di grandi dimensioni.

Per quanto riguarda la semantica, non mi piace nessuna soluzione data finora. Pertanto, utilizzo personalmente la seguente soluzione:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

Questa è una soluzione solo CSS con una buona compatibilità del browser. Utilizza un wrapper di immagine che ha uno sfondo inizialmente nascosto dall'immagine stessa. Al passaggio del mouse, l'immagine è nascosta attraverso l'opacità, quindi l'immagine di sfondo diventa visibile. In questo modo, non si ha un wrapper vuoto ma un'immagine reale nel codice di markup.

Ho un'altra soluzione. Se qualcuno usa AngularJs: http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

Il Javascript:

function ctrl($scope){
    $scope.img= '000';
}

Nessun CSS ^^.

Ho avuto un problema simile: voglio sostituire l'immagine su: hover ma non posso usare BACKGRUND-IMAGE a causa della mancanza del design adattivo di Bootstrap.

Se ti piaccio vuoi solo cambiare l'immagine su: hover (ma non insistere nel cambiare SRC per un determinato tag immagine) puoi fare qualcosa del genere: è solo una soluzione CSS.

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

Se vuoi un codice compatibile con IE7 puoi nascondere / mostrare: l'immagine HOVER posizionandola non per opacità.

Dal momento che non puoi cambiare il srccon CSS: se jQuery è un'opzione per te, controlla questo violino.

dimostrazione

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

Fondamentalmente sta usando il .hover()metodo ... ci vogliono due funzioni per farlo funzionare. Quando entri nell'hover e quando lo esci.

Stiamo usando .attr(abbreviazione di attributo) per modificare l' srcattributo.

Vale la pena notare che è necessaria la libreria jQuery inclusa come nel violino per farlo funzionare.

Violino

D'accordo con la risposta di AshisKumar,
c'è un modo per cambiare l'URL dell'immagine al passaggio del mouse utilizzando la funzionalità jQuery come di seguito:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Personalmente, sceglierei una delle soluzioni JavaScript / jQuery. Non solo questo mantiene la semantica HTML (cioè un'immagine viene mostrata come elemento img con la sua normale immagine src definita nel markup), ma se usi una soluzione JS / jQuery allora sarai anche in grado di usare JS / jQuery per precaricare l'immagine al passaggio del mouse.

Il precaricamento dell'immagine al passaggio del mouse significa che è probabile che non si verifichi alcun ritardo nel download quando l'utente passa il mouse sopra l'immagine originale, con il risultato che il tuo sito si comporta in modo molto più professionale.

Significa che hai una dipendenza da JS, ma la piccola minoranza che non ha JS abilitato probabilmente non sarà troppo preoccupata - e tutti gli altri avranno un'esperienza migliore ... e anche il tuo codice sarà buono!

Non puoi modificare imgl' srcattributo del tag utilizzando CSS. Possibile utilizzando il gestore di eventi Javascript onmouseover() .

HTML:

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Non è possibile modificare img src utilizzando css. Tuttavia, puoi utilizzare la seguente soluzione css pura. HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Oppure, se non vuoi usare un div con un'immagine di sfondo, puoi usare una soluzione javascript / jQuery. html:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Per questo puoi usare il codice sottostante

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

Sui browser meno recenti, :hoverfunzionava solo sugli <a>elementi. Quindi dovresti fare qualcosa del genere per farlo funzionare.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

Il codice seguente funziona sia su Chrome che su Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Ecco una pura soluzione CSS. Metti l'immagine visibile nel tag img, metti la seconda immagine come sfondo nel css, quindi nascondi l'immagine al passaggio del mouse.

.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>

Il modo migliore per cambiare l' srcimmagine è:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Guarda la demo live: http://www.audenaerde.org/csstricks.html#imagereplacecss

Godere!

Prova questo codice.

   .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>

C'è un altro modo semplice usando solo HTML e CSS!

Basta avvolgere il <img>tag con div in questo modo:

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

Quindi, nel tuo file CSS nascondi l'img e imposta l'immagine di sfondo per l'elemento div di wrapping:

.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à!