悬停到href img src？ [关闭]

【问题标题】：Hover to href img src? [closed]悬停到href img src？ [关闭]
【发布时间】：2012-11-05 08:39:09
【问题描述】：

嘿，我已经尝试了一段时间，但没有运气。我有以下代码：

<a href="iframelink opened in fancybox"><img src="image link"></a>

如何将图像悬停应用到 img src？谢谢

【问题讨论】：

CSS、JS……你的想法是什么？ How can i apply an image hover 你的想法是什么？
我会避免使用 js，但想法是向打开 iframe 幻想框的图像链接添加悬停。但是如果没有其他办法，我会使用js。
将title="..." 添加到a 和img - 这将显示悬停？这是你的主意吗？
使用css ":hover" 属性改变图片链接
我厌倦了调用所有的类和 id，但是悬停效果在 img src 下使其无用。

标签： hover image href

【解决方案1】：

使用背景图片代替<img> 标记的示例。

<a href="...." rel="fancybox"><a>

CSS：

a[rel=fancybox] {
  display: block;
  background: url('image1.jpg') no-repeat 0 0 transparent;
  width: 100px; 
  height: 100px;
}

a[rel=...]:hover {
  background: url('image2.jpg') no-repeat 0 0 transparent;
}

您可能需要预加载图片。

使用 JS：

<a href="" rel="" onmouseover="this.getElementById('i1').src='/images/image_hover.jpg'" onmouseout="this.getElementById('i1').src='/images/image.jpg'">
<img id="i1" src="/images/image.jpg">
</a>

【讨论】：

好的，成功了。非常感谢！
好！我正在为此添加书签，所以请不要删除此主题！
别担心，你也可以试试 JS ...应该可以。