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

Question

我读了很多书，我正在尝试找到一个解决方案来做到这一点：

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

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

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

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

非常感谢任何帮助。

谢谢

Answer 1

您可以仅使用 CSS 来做到这一点...

示例位于 http://jsfiddle.net/nAhTF/
解释

1. 将图像和链接包装在
   相对定位的 div 将
2. 链接绝对定位在您想要的位置，并使其位于包装 div 的 :
3. hover 上的 display:none 将 display 更改为 在 IE7 上阻止

---

，您可能需要

在 http 添加 jquery 行示例://jsfiddle.net/nAhTF/1/
解释

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

Answer 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

Answer 3

您链接到的网站使用的图像位于图像顶部，上面有一个 clickevent

类似的

<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 浏览器的可能性，如果它们仍然存在的话（我知道你可以随时将其关闭）

Answer 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; }