Question

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

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

很抱歉，如果这令人困惑，我试图发布图片，但由于我刚刚注册，我无法做到。

Answer 1

是。把它放在一个容器（<div>，<a>，无论如何）中，在容器中添加填充（以增加面积）。

如果您正在使用JS进行操作，请将悬停处理程序附加到容器而不是图像。

如果你正在做CSS，那么这样的事情会有所帮助：

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

Answer 2

这是一个有效的示例，仅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 3

这就是你想要的。她是我的小提琴https://jsfiddle.net/pdjoh1dy/1/ HTML

#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%;
}

CSS

NullPointerException

Answer 4

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

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

4 个答案: