Come rendere l'immagine al passaggio del mouse in css?

Question

Voglio cambiare l'immagine da normale a luminoso quando è al passaggio del mouse, il mio codice:

<div class="nkhome"> 
     <a href="Home.html"><img src="Images/btnhome.png" /></a> 
    </div> 
.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
    width:59px; 
    height:59px; 
} 
.nkhome a img:hover { 
    background:url(Images/btnhomeh.png); 
    position:absolute; 
    top:0px; 
} 

Perché non funziona il passaggio del mouse? Quando il mio mouse è su di esso, mostra la prima immagine, non l'immagine al passaggio del mouse.

Answer 1

Hai un tag a contenente un tag img. Questo è il tuo stato normale. Quindi aggiungi uno background-image come stato di passaggio del mouse e viene visualizzato sullo sfondo del tag a - dietro al tag img.

Probabilmente si dovrebbe creare uno sprite CSS e utilizzare posizioni di fondo, ma questo dovrebbe iniziare:

<div> 
    <a href="home.html"></a> 
</div> 

div a { 
    width: 59px; 
    height: 59px; 
    display: block; 
    background-image: url('images/btnhome.png'); 
} 

div a:hover { 
    background-image: url('images/btnhomeh.png); 
} 

Questo A List Apart Article from 2004 è ancora attuale, e vi darà qualche informazione su sprite, e perché è un buon idea di usarli al posto di due immagini diverse. È scritto molto meglio di qualsiasi cosa potrei spiegarti.

Answer 2

Hi si dovrebbe dare la posizione genitore relativa e bambino assoluta e dare ad altezza o larghezza di classe assoluta come questo

Css

.nkhome{ 
    margin-left:260px; 
    width:59px; 
    height:59px; 
    margin-top:170px; 
    position:relative; 
    z-index:0; 
} 
.nkhome a:hover img{ 
    opacity:0.0; 
} 
.nkhome a:hover{ 
    background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'); 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:0; 
    z-index:1; 

} 

HTML

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a> 
    </div> 
​ 

Demo dal vivo http://jsfiddle.net/t5FEX/7/

---

o questo

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
      onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'" 
      /></a> 
    </div>​ 

Demo online http://jsfiddle.net/t5FEX/9/

Answer 3

Non funziona in questo modo, mettere entrambe le immagini come immagini di sfondo:

.bg-img { 
    background:url(images/yourImg.jpg) no-repeat 0 0; 
} 

.bg-img:hover { 
    background:url(images/yourImg-1.jpg) no-repeat 0 0; 
} 

Answer 4

Stai impostando lo sfondo dell'immagine su un'altra immagine. Che va bene, ma il primo piano (attributo SRC della IMG) si sovrappone ancora a tutto il resto.

.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
} 
.nkhome a { 
    background:url(Images/btnhome.png); 
    display:block; /* Necessary, since A is not a block element */ 
    width:59px; 
    height:59px; 
} 
.nkhome a:hover { 
    background:url(Images/btnhomeh.png); 
} 


<div class="nkhome"> 
    <a href="Home.html"></a> 
</div> 

Answer 5

Semplicemente questo, non div extra o JavaScript necessario, solo pura CSS (jsfiddle demo):

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover"> 
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!"> 
</a> 

CSS

.changesImgOnHover { 
    display: inline-block; /* or just block */ 
    width: 50px; 
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat; 
} 
.changesImgOnHover:hover img { 
    visibility: hidden; 
} 

Answer 6

Ecco un po 'facile per seguire passi e un ottimo tutorial su hover è l'esempio che puoi "suonare" e testare dal vivo.

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

Answer 7

Fai in classe con questo. E crea 2 immagini diverse con la larghezza e l'altezza. Funziona in ie9.

Vedere questo link.

http://kyleschaeffer.com/development/pure-css-image-hover/

Inoltre è possibile 2 differenti immagini fare e il luogo nel nome della classe con sé in hover le altre immagini.

Vedere l'esempio.

.myButtonLink { 
       margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
    background: url('images/home1.png') bottom; 
    text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -5px; 

       border-radius: 3px; 
       -webkit-border-radius: 3px;   
} 

.myButtonLink:hover { 
    margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
       background: url('images/home2.png') bottom; 
       text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -20x; 

       border-radius: 3px; 
       -webkit-border-radius: 3px; 
} 

Answer 8

soluzione esatta al vostro problema

È possibile cambiare l'immagine al passaggio del mouse utilizzando contenuti: url ("LA-image-PATH");

Per un'immagine uso hover sotto la linea nel CSS:

img:hover 

e per cambiare l'immagine al passaggio del mouse utilizzando la configurazione di seguito all'interno img: hover:

img:hover{ 
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg"); 
}