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

Posted 2023-03-05

【中文标题】有没有办法使悬停区域大于图像？

【英文标题】：Is there a way to make the hover area larger than the image?

【发布时间】：2015-10-07 14:37:52

【问题描述】：

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

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

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

【问题讨论】：

是的，这是可能的，只是有一个父元素，里面有一个更大的图像，然后有一个悬停动作。

【参考方案1】：

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

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

CSS

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

【参考方案2】：

这是一个工作示例，只是在 gray 彩色区域中的 hover

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

【讨论】：

谢谢谢谢谢谢！这正是我想要的！

【参考方案3】：

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

【参考方案4】：

是的。将其放入容器中（<div>、<a> 等），为容器添加填充（以增加面积）。

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

如果你在做 CSS，这样的事情应该会有所帮助：

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