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替代方案。

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

Answer 3

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

加号

它的通用解决方案。您无需设置链接的宽度和高度 - 例如background-image方式。

减号

您无法像使用background-size等更改图片的大小，但如果您的图片尺寸符合您想要的尺寸，问题就解决了。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

WordPress

我们将鼠标悬停在图像上后无法更改图像

4 个答案: