javascript - 有没有办法使悬停区域大于图像？

Question

我想知道是否有办法使悬停区域比图像大？

例如，我有一张 72px x 61px 的图片，当我将鼠标悬停在它上面时，它会变成另一张图片。我想知道的是我是否可以将鼠标悬停在图像之外但仍会触发图像的变化。

抱歉，如果这让您感到困惑，我尝试发布图片，但由于我刚刚注册，所以无法发布。

Answer 1

这是一个工作示例，只是悬停在灰色彩色区域

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