Bild nicht über CSS Hintergrund Eigenschaft

Question

Ich habe ein Bild nicht auf Schwebeflug ändern und ich kann nicht herausfinden, warum.

<a href="#"><img src="images/image.png" alt="image" class="portImage2"></a> 

Dies zeigt das Bild ohne Probleme. In meinem CSS habe ich

.portImage2:hover{ 
    background-image: url(http://placekitten.com/g/263/167); 
} 

und das Bild ändert sich nie auf schweben. Kann mir jemand sagen warum?

Answer 1

Das Hintergrundbild und das Bild sind nicht das gleiche Bild.

Wenn Sie das Hintergrundbild ändern, ändern Sie einfach, was ist hinter das Bild.

Wenn und nur wenn das Bild durchscheinend ist, können Sie die Änderung sehen.

.portImage2:hover{ 
 
    background-image: url(http://placekitten.com/g/263/167); 
 
}

<a href="#"><img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2"></a>

Wenn Sie das Bild selbst ändern wollen, dann müssen Sie diese (die Inhalt) undnicht die Hintergrund ändern.

.portImage2:hover{ 
 
    content: url(http://placekitten.com/g/263/167); 
 
}

<a href="#"><img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2"></a>

Answer 2

Sie Bild nicht ersetzen können als IMG Tag mit CSS Hintergrund Eigenschaft eingefügt. Der Browser erlaubt dies nicht.

setzen Sie entweder den ursprünglichen Hintergrund auf A Element und ändern Sie es :hover Pseudoklasse, oder Javascript verwenden onMouseOver Ereignis und aktualisieren src Attribut dynamisch zu befestigen.

Beide Wege sind immer noch bot perfekt (oder meine Beschreibung ist zu vereinfacht), aber dieses Problem ist sehr einfach und es ist in fast jedem Tutorial/Einführung in HTML & CSS beschrieben.