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

【问题标题】：how to fix issue with images link on hover?如何解决悬停时图像链接的问题？
【发布时间】：2014-10-20 19:27:13
【问题描述】：

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

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>

所有图像的尺寸都不同，但是第一张图像我将图像的大小调整为 150 像素宽和 100 宽高，然后悬停开始工作，但我希望图像悬停在 100 像素宽和 50 像素高上，当我这样做时它只悬停在图像的右侧，并且该图像是左侧的第一张图像。第二张图片我尝试调整大小，但它只悬停在图片顶部。任何帮助将不胜感激:)

【问题讨论】：

您能创建一个突出您的问题的 jsFiddle 吗？
等等……什么？你能创建一个 jsfiddle 或者至少提供你所有的代码吗？编辑：我猜你的问题是你的<img> 标签设置为display:inline，但我不太明白你的问题是什么。
这很奇怪，我知道我认为这可能是其中一个可能导致此问题的 css 代码，但我就是想不通
您展示了一些 CSS，但没有展示选择器。我们不知道它适用于什么。也不清楚你的问题是什么
这里是jsfiddle.net/1hwm3epj

标签： javascript jquery html css

【解决方案1】：

您的 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>

【讨论】：

在第三张图片上，我将一些内容与图片一起嵌入，所以如果我只为第三张图片使用原始代码，也会导致问题吗？

【解决方案2】：

我不完全了解您的需求，据我了解，您可以按以下方式进行：添加此 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;}

小提琴：http://jsfiddle.net/1hwm3epj/16/

【讨论】：