Question

我正在努力为这个网站提供类似的功能; http://theadeleexperience.com/您将鼠标悬停在缩略图上，它会显示帖子的日期。我已经准备好了所有的PHP和HTML代码，但是我需要一些jQuery代码的帮助来实现这一点。

下面的代码（显然）会显示.test div的每个实例（具有讽刺意味的是，除了我悬停在其上的那个）;但是我只想让它显示我正在盘旋的.test div - 而不是其他3个实例。

除了下面的代码之外，可能有一种更简单的方法来实现它，甚至不使用jQuery。

$(document).ready(function() {
$(".test").hide();
    $(".thumbnail").mouseenter(function() {
        $(".test").show();
    $(".thumbnail").mouseleave(function() {
    $(".test").hide();
    });
        });
});

Answer 1

Here是我提出的解决方案。

您提供的代码的主要问题是您没有在mouseenter函数后关闭括号。只获得你正在悬停的那个的关键是使用this。你可以给this一个参数，如下所示。 .overlay，是目标，但您使用this来确保它只是被徘徊的那个。最终代码应如下所示

$(".overlay").hide();
$("article").on("hover", function () {
  $(".overlay", this).slideToggle();
});

Answer 2

HTML

<div class="thumbnail">
    <img alt="thumbnail here" src="http://distilleryimage1.s3.amazonaws.com/87fb9072abad11e2b60722000a9f09f0_7.jpg" />
    <div class="test">here is a test content</div>
</div>

JS

$(document).ready(function(){
    $('.test').hide();
    $('.thumbnail').mouseenter(function(){
        $(this).find('.test').each(function(e){
            $(this).show();
        });
    });
    $('.thumbnail').mouseout(function(){
        $(this).find('.test').each(function(e){
            $(this).hide();
        });
    });
});

CSS

.thumbnail {
    width:200px;
}
.thumbnail img{
    width:100%;
}
.test{
    background: black;
    color: white;
    opacity:0.8;
    margin:10px;
    position:absolute;
    top:0;
    z-index:100;
}

Answer 3

这个怎么样？

$(document).ready(function() {
    $(".test").hide();
    $(".test").mouseenter(function() {
        $(".test").show();
    });
    $(".test").mouseleave(function() {
        $(".test").hide();
    });
});

您专注于测试而非缩略图。

Answer 4

使用.hover()

$("article").hover(function() {
    $(".overlay", this).slideDown();
}, function() {
    $(".overlay", this).slideUp();
});

jQuery - 在悬停时显示重复div的一个实例

4 个答案:

HTML

JS

CSS