Question

我有以下场景 - 我正在显示产品名称列表作为链接。现在，当用户将鼠标悬停在链接上时，我需要显示产品图像（图像被隐藏）.html就像这样（动态构建prod1，prod2等）

 <a id="prod1" title="product"></a>
 <div class=hidden><img src=""></img></div>

Answer 1

您可以使用.show()和.hide()。

如果可以的话，给链接一个公共类，这样你就可以这样做......

$('.prod').hover(
  function{
    $(this).next('.hidden').show();
  },
  function{
    $(this).next('.hidden').hide();
  }
);

但是如果你不能改变html，你可以这样做，

function over(){
    $(this).next('.hidden').show();
}
function out(){
    $(this).next('.hidden').hide();
}
$('#prod1,#prod2').hover(over,out); // this will show on mouseover and hide on mouseout

// but if you just want to show and not hide do this
$('#prod1,#prod2').hover(over);

Answer 2

你可以使用.hover()和.toggleClass()这样做：

$("#prod1").hover(function() {
  $(this).next("div").toggleClass("hidden");
});

如果你给你的链接一个类，你可以使它更通用，如下所示：

<a id="prod1" title="product" class="prod"></a>

这样的剧本：

$(".prod").hover(function() {
  $(this).next("div").toggleClass("hidden");
});

如果需要，您也可以给它一个效果，例如像这样的展开/淡出：

$(".prod").hover(function() {
  $(this).next("div").stop(true, true).toggle('fast');
});

Answer 3

除非你想要花哨的动画，否则你不需要jquery这样做。

 <div class="aProductLink" >
    <a id="prod1" title="product"></a>
    <div class="productHoverContent"><p>Put a description here if you need.</p><img src="bla.jpg"/></div>
 </div>

Css是这样的：

.aProductLink {
  position:relative;
  overflow:visible;
}

.productHoverContent{
  display:none;  //Hide by default
  position:absolute;
  top:0;
}

.aProductLink:hover .productHoverContent {
  display:block; //Show in hover state.
}

这与suckerfish下拉菜单的技术相同。

请注意，大多数触摸屏手机都没有悬停状态，因此您应该考虑其可访问性。

如何在这种情况下使用jquery？

3 个答案: