如何解决悬停时图像链接的问题

how to fix issue with images link on hover?

本文关键字：图像 链接 问题 悬停 何解决 解决      更新时间：2023-09-26

所以我有三个图像，它们都使用相同的代码，具有不同的风格，当然第一个图像在左边，第二个图像在中间，第三个在右边。

bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center; 
margin: 0px auto;

好吧，我遇到的问题是，当你在图像上悬停时，它只能将指针悬停在图像的顶部，但当悬停在底部的图像上时，它根本检测不到任何链接。

图像的代码示例我正在使用

<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>

所有的图像都有不同的大小，但第一张图像中，我将图像调整为150px宽和100px高，然后悬停开始工作，但我希望图像悬停在100px宽和50px高，当我这样做时，它只悬停在图像的右侧，这张图像是左侧的第一张图像。我试着调整第二张图片的大小，但它只是停留在图片的顶部。任何帮助都将不胜感激：）

您的CSS出现问题。所有包含锚标签和图像的<div>都有fixed和left: 0的位置，这就是它们重叠的原因。你可以像这样实现你想要做的事情，我修改了HTML并添加了新的CSS:

#images {
    text-align: center;
}
#images a:nth-child(2) {
display: inline-block;
float: left;
}
#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><a href="#"target="_blank"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a>
    <a href="#"target="_blank"><img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a>
    <a href="#"target="_blank"><img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></a></div>

我不知道你的确切需求，据我所知，你可以按如下方式做：添加此css样式并将图像悬停：

#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}
 #img1 img:hover {
width:100px !important;
height:50px !important;}

Fiddle：http://jsfiddle.net/1hwm3epj/16/

相关文章：