将鼠标悬停在图像上后更改图像不起作用

Question

一旦我们将鼠标悬停在图像上，我想显示另一张图像。

<div>
  <a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
           'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" 
     title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>

我尝试如下：

我添加了class="a1"，但它对我不起作用。

<a class="a1"  href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
                     'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" 
   title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>

css

.a1:hover {
   background-image: url('images/G+1.png');
}

Answer 1

这里有两种解决方案供您查询。 （鼠标悬停时更改图像）

HTML + JavaScript 演示

<div class="image_hover">
  <a href="#" rel="nofollow">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
  </a>
</div>

HTML + CSS 演示

.image_hover {
    position: relative;
    cursor: pointer;
}
.image_hover img {
    position: absolute;
    transition: opacity .5s ease;
}
.image_hover img:hover {
    opacity: 0;
}

<div class="image_hover">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
    <img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>

Answer 2

首先，给你的链接标签一些样式，设置它的背景。

a.a1 {
  display: block;
  width: 100px;
  height: 50px; (width and height are whatever you need them to be)
  background: url('images/G+.png') no-repeat center center;
}

现在这是一个非常简单的示例，但它所做的是将您的链接设置为块级元素，给出图像背景的正确尺寸，然后将整个元素背景设置为图像。

然后，对于翻转效果，您使用：

a.a1:hover {
  background: url('images/G+1.png') no-repeat center center;
}

现在我喜欢将我的不重复和定位属性放在background 属性中，如果你真的想要的话，你可以将它们分成background-size 等。

我知道在你的实现中你有一个 img 在那里设置图片，但对于你想要实现的目标，我建议使用 css 替代方案。

关于该主题的链接（根据评论）： CSS: image link, change on hover

Answer 3

@AaronLavers 评论中的附加答案（使用background-image 并将其替换为:hover），您可以使用:before - 伪类和content 属性。

优点

这是通用解决方案。您不必设置链接的宽度和高度 - 就像background-image 方式一样。

减号

您不能像使用background-size 等那样更改图像的大小，但如果您的图像是您想要的确切大小，问题就解决了。

a:before {
  content:url(http://i.stack.imgur.com/upUcm.jpg); 
}

a:hover:before {
  content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}

<a href="#"></a>

Answer 4

这不起作用的原因是 img 标签和 background-image 是两个不同的东西。如果您想让它起作用，您可以尝试将背景图像放在 a 上，然后在悬停时更改它。由于特殊性规则，它需要很重要。另一种选择是将 php 放入您的 css 文件中，但这可能不值得设置。

CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}

HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>