Question

我正在使用jQuery和Masonry处理图像网格。

当用户将鼠标悬停在网格中的图像上时，我正试图实现以下效果：

鼠标进入元素时会出现链接
鼠标离开元素时链接将消失
图像应该淡化/倾斜为灰色着色方案（此处未实现 - 不确定如何接近它）。

我调查了jQuery UI's Tooltips，但这些似乎只是以“讲话泡泡”的方式起作用，当我对链接出现在图像本身感兴趣时。

这是我尝试过的代码，使用append()，它只是拍打图像旁边的链接。

$(document).ready(function(){
$('.grid-item').hover(function(){
$(this).append($("<h1>This Will be A Link One Day</h1>"));
}, function(){
    $(this).find("h1:last").remove();
});
});

Answer 1

发生的事情是完全正常的。您附加链接并附加链接。如果我做对了，你想要的是每当用户将鼠标悬停在网格内容上时显示图像（带链接）。我想这就是你要找的东西：

Jquery的：

$(document).ready(function(){
       $("#contentDiv").hover(function(){
            $("#imageDiv").html("<a href='yourlink.com'><img src='yourimage.png'</a>");
            $("#imageDiv").show();
       }, function(){
            $("#imageDiv").hide();
       });

       $("#contentDiv").mouseout(function(){
            $("#imageDiv").hide();
       });
});

网格中显示的HTML（每行）：

<div id="imageDiv">
</div>
<div id="contentDiv">
   Testing content, supposing is displayed in your grid
</div>

您也可以在this fiddle中查看。您可以使用测试div维度和图片来使其以更稳定的方式悬停。我只是指出了这个想法。

希望我帮忙！

在悬停jQuery上添加链接到图像

1 个答案: