Question

希望有人可以帮助我或指出我正确的方向。

我想显示一个图片网格，用户可以将鼠标悬停在图片上以获取更多信息，就像完成here一样。

这是一件容易的事吗？我可以用纯CSS做或者我需要使用jQuery吗？如果可能的话，我只需要一个正确方向的指针吗？

Answer 1

您提供的链接似乎首先给出背景图像的悬停状态，然后通过timeOut显示工具提示。我正在努力解决这个问题。

所以，你走了。这是Fiddle！

最重要的是jQuery包含延迟AND以及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");
    }
);

更多关于jQuery的.delay()
更多关于CSS sprites
Image copyright

改进答案：

这是一个Showcase，这是展示的fiddle，这里是图像does not change（如你所愿）的小提琴。

我使用了jQuery插件hoverIntent来确保不是每个图像都会被徘徊，即使是一个毫秒，也会显示工具提示。它的作用是检查用户的意图是否悬停图像，然后（在某个timeOut之后）执行该功能。关于此插件的更多信息here。你可以使用jQuery的标准hover（），但我不会建议它。

z-index也需要更改，否则图像会显示在工具提示 OR 下面，其他项目的图像会与我们想要的图像的工具提示重叠。

如果您还有其他问题，请在评论中说明。

Answer 2

我要做的是使用jquery。创建一个可见的div，然后创建一个隐藏的div，用于显示悬停时所需的信息。然后只需使用jquery隐藏/显示使用css的div。

$(".info-class").hover(function(){
    $(this).css('display', 'none');
    $(".other-clas").css('display', 'block');
});

类似于上面的内容

Answer 3

我已经看过他们在那个网站上做了什么，看起来对我很有用。

我要做的就是添加

<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();
})

这只是一个起点，但我就是这样做的。

编辑添加了解释

在HTML中有一系列div类的div（它们也可以是ul列表中的li，但现在这并不重要）。每个方块都包含所需的所有数据 - 正常图像，缩放图像和工具提示HTML。最后两个隐藏在CSS中。每个方块还有一个数据属性（data-show-tooltip-in），其中包含将显示工具提示的选择器。

然后JS会做其余的事情 - 评论应该有所帮助。

将鼠标悬停在图像上时如何显示叠加相邻图像的描述？

3 个答案: