IMG hover
Autor: Vincenzo Errico
Visitado 551,
Seguidores 1,
Compartilhado 0
Sapreste dirmi dove sbaglio? L'hover viene visualizzato solo con Chrome, IE no, Firefox no.
Di seguito il codice che ho usato:
<a href="#menu" onclick="return x5engine.utils.location('#menu', null, false)"><img id="logo-scroll" src="images/logo-scroll-down.png" /></a>
<style type="text/css">
/* scroll down */
#logo-scroll {
z-index: 10;
position: absolute;
padding: 0px;
margin-top: -175px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 220px;
height: 88px;
}
#logo-scroll:hover {
content: url('images/logo-scroll-down-2.png');
}
@media (max-width: 1200px) {
#logo-scroll {display:none !important;}
}
</style>
Publicado em
Suppongo che non ti serva utilizzare l'effetto "Immagine sovrapposta" dell'Oggetto Immagine.
Comunque, la proprietà content è più comunemente usata con :after e :before che con :hover
Potresti usare gli eventi onmouseover e onmouseout nel tag img per creare un semplice hover oppure attribuire l'immagine allo sfondo del tag a invece che inserire il tag img e cambiare l'immagine all'hover con background-image