1

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

我想显示一个图像网格，用户可以将鼠标悬停在图像上以获取更多信息，就像在这里所做的那样。

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

4

3 回答 3

2

您提供的链接似乎首先给出了背景图像的悬停状态，然后通过 timeOut 它显示了一个工具提示。我正在做一个小提琴来说明这一点。

所以，给你。这是小提琴！

最重要的是 jQuery，它包含延迟以及 CSS 中规定的图像的悬停状态。因此，当用户悬停图像时，他得到的第一件事就是另一张图像。这是通过简单的 CSS hover 和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，这是该展示的小提琴，这是图像不变的小提琴（如您所愿）。

我使用了 jQuery 插件hoverIntent来确保不是每个悬停一毫秒的图像都显示工具提示。它所做的是检查用户是否打算将图像悬停，然后（在某个 timeOut 之后）才执行该功能。关于这个插件的更多信息在这里。您可以使用 jQuery 的标准 hover()，但我不建议这样做。

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

如果您还有任何问题，请在评论中说出来。

于 2012-04-21T15:53:25.227 回答
1

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

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

类似于上面的东西

于 2012-04-21T15:40:04.317 回答
1

我查看了他们在那个网站上所做的事情，对我来说它看起来过度设计了。

我要做的是我们添加

<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 类 square （它们也可以是 ul 列表中的 li，但现在不重要了）。每个方块都有它需要的所有数据——普通图像、缩放图像和工具提示 HTML。最后两个隐藏在 CSS 中。每个方块还有一个 data- 属性 (data-show-tooltip-in) 以及将显示工具提示的选择器。

然后 JS 完成剩下的工作 - 评论应该会有所帮助。

于 2012-04-21T15:58:55.690 回答