带有链接的图像上的 Jquery 鼠标悬停图像答案

【问题标题】：Jquery mouseover image on image with a link带有链接的图像上的 Jquery 鼠标悬停图像
【发布时间】：2011-04-21 18:24:52
【问题描述】：

我读了很多，我正在尝试找到一个解决方案：

当您将鼠标移到任何产品图像上时，会出现一个按钮，该按钮是一个 href 链接。单击该按钮会打开一个覆盖框。我打算为此使用thickbox。

我的问题是试图弄清楚当鼠标悬停在图像上时如何使用 Jquery 来显示该图像。这是一个很好的例子：

http://oldnavy.gap.com/browse/category.do?cid=55474

按钮的大小恰到好处，在所有浏览器中都能正确显示，并且始终与其在图像中的位置保持一致。

非常感谢任何帮助。

谢谢

【问题讨论】：

标签： jquery image mouseover

【解决方案1】：

你可以只用 CSS 来做到这一点......

http://jsfiddle.net/nAhTF/的示例
说明

将图像和链接包装在一个相对定位的div
将链接绝对定位到您想要的位置并使其成为display:none
在 :hover 的包装 div 上将 display 更改为 block

在 IE7 之前，您可能需要添加一个 jquery 行

http://jsfiddle.net/nAhTF/1/的示例
说明

在包装 div 的悬停上也添加一个类，因为 IE 不支持 div 上的悬停事件..（并相应地更新 css 规则）

【讨论】：

【解决方案2】：

jquery的使用方法：

1.使用隐藏的div（点击后显示））
2.点击链接 - 然后你应该使用 jquery "get" http://api.jquery.com/jQuery.get/ -
- 向服务器发送请求特定参数（ID，或其他东西 else..) 获取当前链接坐标（用于 div 显示）
3.服务器会回复你数据。（来自数据库..例如）
4.显示 div，带坐标。 :)

http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html

【讨论】：

【解决方案3】：

您链接到的网站使用的图片位于图片顶部并带有点击事件

类似的东西

<a href="#" class="quicklink"><img src="item1.jpg" /></a>
<a href="#" class="quicklink"><img src="item2.jpg" /></a> 
<a href="#" class="quicklink"><img src="item3.jpg" /></a>

...

<img src="button.jpg" id="button" style="dispaly:none;" />

使用类似的脚本：

function handler(){
 //possible event for button
}

$(function(){
   $('a.quicklook').mouseover(function(){
      $('#button').css({position:'absolute',top:$(this).offset().top+'px',right:$(this).offset().right+'px'})
      .show().bind('click',handler);
   }).mouseout(function(){
      $('#button').hide();
   });
});

但是有更多的位置信息，因为它只是放在 a 标签的左上角（希望如此）。我会使用类似的东西，但可能在与链接相同的容器内使用样式和链接，这样我就可以在隐藏它和添加脚本之前对其进行样式设置，如果它们仍然存在，也可以使用向后兼容的非 JavaScript 浏览器（我知道你可以随时关闭它）

【讨论】：

【解决方案4】：

最简单的方法是使用 CSS。

HTML：

<div class="product">
    <img src="product.jpg" alt="a product" />
    <a class="buy-button" href="javascript:alert('bought');">Buy now</a>
</div>

CSS：

.product .buy-button { display: none; }
.product:hover .buy-button { display: inline; }

现在这在旧版本的 IE 中不起作用。如果这是一个问题，您可以使用 jQuery 添加一个类，并在 CSS 中使用它。

JS：

$('.product').hover(
    function(){ $(this).addClass('hover'); },
    function(){ $(this).removeClass('hover'); }
);

CSS：

.product.hover .buy-button { display: inline; }

【讨论】：