Question

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

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

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

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

按钮尺寸合适，在所有浏览器中都能正确显示，并且始终与图像中的位置一致。

非常感谢任何帮助。

由于

Answer 1

你只能用CSS做到这一点......

http://jsfiddle.net/nAhTF/的例子的解释

包装图像并链接到相对定位div

绝对位置您想要的链接并使其成为display:none

on :hover包装div将display更改为block

在Pre IE7 上，您可能需要添加一个jquery行

http://jsfiddle.net/nAhTF/1/的例子的解释

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

Answer 2

如何使用jquery：

1.使用隐藏的div（点击后显示））
2.在链接点击 - 然后你应该使用jquery“get” http://api.jquery.com/jQuery.get/ -
- 向服务器发送请求特定参数（ID或其他东西 else ..）获取当前链接cordinates（对于div show）
3.Server会响应您的数据。（来自datbase..for a example）
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();
   });
});

但是有更多的位置信息，因为它只是将它放在标签的左上角（希望如此）。我会使用类似的东西，但是在链接的同一个容器中使用样式和链接，所以我可以在隐藏它并添加脚本之前设置它的样式，如果它们仍然存在，也可以使用后兼容的非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; }

在图像上的Jquery mouseover图像与链接

4 个答案: