希望有人可以帮助我或为我指明正确的方向。
我想显示一个图像网格，用户可以将鼠标悬停在图像上以获取更多信息，就像 here 所做的那样。
这是一件容易的事吗？我可以使用纯 CSS 还是需要使用 jQuery？如果可能的话，我只需要一个指向正确方向的指针吗？
【问题讨论】：
您提供的链接似乎首先给出了背景图像的悬停状态，然后通过 timeOut 它显示了一个工具提示。我正在制作一个小提琴来说明这一点。
所以，给你。这是Fiddle！
最重要的是 jQuery，它包含延迟以及 CSS 中规定的图像的悬停状态。因此，当用户悬停图像时，他得到的第一件事就是另一张图像。这是通过简单的 CSS 悬停和 CSS sprites 完成的。
.item {
background-color: white;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center top;
}
.item:hover {
background-repeat: no-repeat;
background-position: center bottom;
}
#flower {
background-image: url('http://bramvanroy.be/files/images/tooltipOverlay.jpg');
}
当图像悬停在开头时，触发了一个jQuery函数但它被延迟了：
var tooltip = $(".item-tooltip");
tooltip.hide();
$(".item-wrapper").hover(
function() {
$(this).children(tooltip).delay(550).fadeIn("slow");
$(this).children(".item").fadeOut("slow");
},
...
当鼠标离开工具提示时，它会被隐藏，.item 会再次显示：
...
function(){
$(this).children(tooltip).fadeOut("fast");
$(this).children(".item").fadeIn("fast");
}
);
改进的答案：
这里是Showcase，这里是那个展示柜的fiddle，这里是图片does not change的小提琴（如你所愿）。
我使用了 jQuery 插件 hoverIntent 来确保不是每个悬停一毫秒的图像都会显示工具提示。它的作用是检查用户是否意图悬停图像，然后（在某个 timeOut 之后）执行该功能。有关此插件的更多信息，请通过here。你可以使用jQuery的标准hover()，但我不建议这样做。
z-index 也需要更改，否则图像会出现在工具提示下方或其他项目的图像会与我们想要的图像的工具提示重叠。
如果您还有其他问题，请在 cmets 中说出来。
【讨论】：
我要做的是使用 jquery。创建一个可见的 div，然后创建一个隐藏的 div，在悬停时显示您想要的信息。然后只需使用 jquery 使用 css 隐藏/显示该 div。
$(".info-class").hover(function(){
$(this).css('display', 'none');
$(".other-clas").css('display', 'block');
});
类似上面的东西
【讨论】：
我查看了他们在该网站上所做的事情，但在我看来，它已经过时了。
我会做的是我们添加
<div class="comtainer">
<div id="g11" class="square large" data-show-tooltip-in="#g12, #g12">
<div class="normal-view"><img ... ></div>
<div class="large-view"><img ... ></div>
<div class="tooltip">blah blah</div>
</div>
<div id="g12" class="square small" data-show-tooltip-in="#g13">
...
</div>
...
</div>
css
div.large-view { display : none; }
div.tooltip { display : none; }
然后 javascript 会做类似的事情（JQuery for speed）：
$( '.square' ).on( 'mouseover', function*(e){
//hides the normal image
$( this ).find( '.normal-view' ).hide();
//shows the zoomed image
$( this ).find( '.large-view' ).show();
//stores a reference to the square where the HTML tolltip will be shown
var $tooltip = $( $( this ).attr( 'data-show-tooltip-in' ) );
//hides the original content of the tooltip square
$tooltip.find( 'div' ).hide();
//clones the tooltip to the other square and shows it
$( this ).find( '.tooltip' ).clone().qppendTo( $tooltip ).show();
})
这只是一个起点，但我会这样做。
EDIT添加说明
在 HTML 中有一系列的类 square 的 div（它们也可以是 ul 列表中的 li，但现在不重要了）。每个方块都有它需要的所有数据——普通图像、缩放图像和工具提示 HTML。最后两个隐藏在 CSS 中。每个方块还有一个 data- 属性 (data-show-tooltip-in) 以及将显示工具提示的选择器。
然后 JS 完成其余的工作 - cmets 应该会有所帮助。
【讨论】：