javascript - toda - ¿Hay alguna manera de hacer que el área de desplazamiento sea más grande que la imagen?

hacer que un div abarque toda la pantalla

Question

Me preguntaba si hay una manera de hacer que el área de vuelo estacionario sea más grande que la imagen.

Por ejemplo, tengo una imagen que es 72px x 61px y cuando sobrevivo sobre ella, cambia a una imagen diferente. Lo que me gustaría saber es si puedo desplazarme fuera de la imagen pero aún así activar el cambio en la imagen.

Lo siento si esto es confuso, traté de publicar una imagen, pero desde que me registré no puedo.

Answer 1

Es esto lo que estás buscando. ella es mi violín https://jsfiddle.net/pdjoh1dy/1/ HTML

 <div id="hover-example">
<div id="img-holder">
</div>
</div>

CSS

#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}

Answer 2

Sí. Colóquelo en un contenedor ( <div> , <a> , lo que sea), agregue relleno al contenedor (para aumentar el área).

Si lo que está haciendo es en JS, coloque el manejador de desplazamiento al contenedor en lugar de la imagen.

Si está haciendo CSS, algo como esto debería ser útil:

.container:hover img{
/* styles for img when .container is hovered*/
} 

Answer 3

También puede configurar la imagen para que se display: block y agregue padding , si no molesta con su diseño.

Answer 4

Este es un ejemplo de trabajo, solo hover el hover sobre la región de color gray

.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url(''http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg'');
}

<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>