Есть ли способ сделать область зависания больше, чем изображение?

Question

Мне было интересно, есть ли способ сделать область зависания больше, чем изображение?

Например, у меня есть изображение 72px x 61px, и когда я навис над ним, оно меняется на другое изображение. То, что я хотел бы знать, это то, что я могу зависнуть вне изображения, но все же вызывать изменение изображения.

Извините, если это сбивает с толку, я попытался отправить изображение, но так как я только что подписал, я не могу.

Answer 1

Это рабочий пример, просто hover в 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>

Answer 2

Да. Поместите его в контейнер (<div>, <a>, что угодно), добавьте отступы в контейнер (чтобы увеличить площадь).

Если вы используете JS, присоедините обработчик hover к контейнеру вместо изображения.

Если вы делаете CSS, то, как это должно быть полезно:

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

Answer 3

Вы также можете установить изображение в display: block и добавить padding, если это не беспорядок с вашего макета.

Answer 4

Является ли это то, что вы собираетесь. она моя скрипка 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%; 
}