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

Question

我想知道有没有办法让悬停区域比图像大？

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

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

Answer 1

是的。把它放在一个容器中（<div>，<a>，随便什么），给容器添加padding（增加面积）。

如果您正在做的是在 JS 中，请将悬停处理程序附加到容器而不是图像。

如果您正在做 CSS，像这样的东西应该会有帮助：

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

Answer 2

您也可以将图片设置为 display: block 并添加 padding，如果它不影响您的布局的话。

Answer 3

这是一个工作示例，只是 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 4

这就是你想要的吗？她是我的 fiddle 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%;
}

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

Is there a way to make the hover area larger than the image?

html

javascript

css

image

hover