[英]Is there a way to make the hover area larger than the image?
I was wondering if there is a way to make the hover area bigger than the image? 我想知道是否有办法让悬停区域大于图像?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. 例如,我有一个72px x 61px的图像,当我将鼠标悬停在它上面时,它会变为另一个图像。 What I would like to know is if I can hover outside the image but still trigger the change in the image. 我想知道的是,如果我可以悬停在图像外但仍然触发图像的变化。
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to. 对不起,如果这令人困惑,我试图发布图片,但因为我刚刚注册,我无法。
Yes. 是。 Put it in a container ( <div>
, <a>
, whatever), add padding to the container (to increase the area). 把它放在一个容器( <div>
, <a>
,无论如何)中,在容器中添加填充(以增加面积)。
If what you're doing is in JS, attach the hover handler to the container instead of the image. 如果您在JS中执行的操作,请将悬停处理程序附加到容器而不是图像。
If you're doing CSS, something like this should be helpful: 如果您正在使用CSS,这样的事情应该会有所帮助:
.container:hover img{
/* styles for img when .container is hovered*/
}
This is a working example, just hover
in the gray
colored region 这是一个工作示例,只是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>
Is this what you are going for. 这就是你想要的。 her is my fiddle https://jsfiddle.net/pdjoh1dy/1/ HTML 她是我的小提琴https://jsfiddle.net/pdjoh1dy/1/ HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS 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%;
}
您还可以将图像设置为display: block
并添加padding
,如果它不会影响您的布局。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.