CSS: cambiar imagen src en img: hover

Necesito cambiar la <img>URL de origen enhover .

He intentado esto pero no funcionará:

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

Cualquier ayuda sería apreciada.

Actualizar:

Esto solo funciona para Webkit / Google Chrome.

Con solo html y css, no es posible cambiar el src de la imagen. Si reemplaza la etiqueta img con la etiqueta div, entonces es posible que pueda cambiar la imagen que se establece como fondo como

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

Y si cree que puede usar algún código javascript, entonces debería poder cambiar el src de la etiqueta img como se muestra a continuación

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);" />

He modificado algunos cambios relacionados con 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>

MANIFESTACIÓN

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

Tuve un problema similar pero mi solución fue tener dos imágenes, una oculta (pantalla: ninguna) y otra visible. Al pasar el cursor sobre un tramo circundante, la imagen original cambia para mostrar: ninguna y la otra imagen para mostrar: bloque. (Podría usar 'en línea' en su lugar dependiendo de sus circunstancias)

Este ejemplo utiliza dos etiquetas de intervalo en lugar de imágenes para que pueda ver el resultado al ejecutarlo aquí. Desafortunadamente, no tenía ninguna fuente de imágenes en línea para usar.

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

Lo que podría hacer es hacer una pequeña trampa configurando widthy heighten 0 para ocultar la imagen real y aplicar algo de CSS para hacer lo que quiera:

#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');
}

Y el relleno hace que la imgetiqueta tenga el tamaño que desea que tenga (la mitad del tamaño de su imagen real).

Violín

Aquí hay un enfoque alternativo que utiliza CSS puro. La idea es incluir ambas imágenes en el marcado HTML y mostrarlas u ocultarlas en consecuencia en: 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/

Tenga en cuenta que las imágenes utilizadas son de las mismas dimensiones para una visualización adecuada. Además, los tamaños de archivo de estas imágenes son bastante pequeños, por lo que cargar varios no es un problema en este caso, pero puede serlo si desea alternar la visualización de imágenes de gran tamaño.

En cuanto a la semántica, no me gusta ninguna solución dada hasta ahora. Por lo tanto, personalmente uso la siguiente solución:

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

Esta es una solución única de CSS con buena compatibilidad con el navegador. Utiliza una envoltura de imagen que tiene un fondo que inicialmente está oculto por la propia imagen. Al pasar el mouse, la imagen se oculta a través de la opacidad, por lo que la imagen de fondo se vuelve visible. De esta manera, uno no tiene un contenedor vacío sino una imagen real en el código de marcado.

Tengo una solución más. Si alguien 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>

El Javascript:

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

Sin CSS ^^.

Tuve un problema similar: quiero reemplazar la imagen en: hover pero no puedo usar BACKGRUND-IMAGE debido a la falta del diseño adaptativo de Bootstrap.

Si me gusta, solo quiero cambiar la imagen en: hover (pero no insistir en cambiar SRC para la etiqueta de imagen determinada), puede hacer algo como esto: es una solución solo de 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; }

Si desea un código compatible con IE7, puede ocultar / mostrar: la imagen HOVER posicionando no por opacidad.

Dado que no puede cambiar srccon CSS: si jQuery es una opción para usted, verifique este violín.

Manifestación

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

Básicamente está usando el .hover()método ... se necesitan dos funciones para que funcione. Cuando ingresa al hover y cuando sale de él.

Estamos usando la .attr(abreviatura de atributo) para cambiar el srcatributo.

Vale la pena señalar que necesita la biblioteca jQuery incluida como en el violín para que esto funcione.

Violín

De acuerdo con la respuesta de AshisKumar,
hay una manera de cambiar la URL de la imagen al pasar el mouse usando la funcionalidad jQuery como se muestra a continuación:

$(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, optaría por una de las soluciones JavaScript / jQuery. Esto no solo mantiene su semántica HTML (es decir, una imagen se muestra como un elemento img con su imagen src habitual definida en el marcado), sino que si usa una solución JS / jQuery, también podrá usar JS / jQuery para precargar su imagen flotante.

La precarga de la imagen flotante significará que es probable que no haya demoras en la descarga cuando el usuario pase el mouse sobre la imagen original, lo que hará que su sitio se comporte de manera mucho más profesional.

Significa que tiene una dependencia de JS, pero la pequeña minoría que no tiene JS habilitado probablemente no se preocupará demasiado, y todos los demás obtendrán una mejor experiencia ... ¡y su código también será bueno!

No puede cambiar imgel srcatributo de la etiqueta usando CSS. Posible usando el controlador de eventos de 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";
}

No puede cambiar el src de img usando css. Sin embargo, puede usar la siguiente solución 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');
}

O, si no desea usar un div con una imagen de fondo, puede usar una solución 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');});

Para esto, puede usar el siguiente código

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');

}

En navegadores más antiguos, :hoversolo funcionaba con <a>elementos. Entonces tendrías que hacer algo como esto para que funcione.

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

El siguiente código funciona tanto en Chrome como en 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>

Aquí tienes una solución CSS pura. Coloque la imagen visible en la etiqueta img, coloque la segunda imagen como fondo en el CSS y luego oculte la imagen al pasar el 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>

La mejor forma de cambiar la srcimagen es:

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

Vea la demostración en vivo: http://www.audenaerde.org/csstricks.html#imagereplacecss

¡Disfrutar!

Pruebe este código.

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

¡Existe otra forma sencilla de usar HTML y CSS únicamente!

Simplemente envuelva su <img>etiqueta con div así:

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

Luego, en su archivo CSS, oculte el img y establezca la imagen de fondo para el elemento div de envoltura:

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