3

我正在尝试获得与该网站类似的功能；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();
    });
        });
});
4

4 回答 4

2

这是我想出的解决方案。

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

$(".overlay").hide();
$("article").on("hover", function () {
  $(".overlay", this).slideToggle();
});
于 2013-04-23T03:28:45.110 回答
1

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;
}
于 2013-04-23T03:29:24.510 回答
0

那这个呢？

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

您专注于测试而不是缩略图。

于 2013-04-23T03:28:24.403 回答
0

使用.hover()

$("article").hover(function() {
    $(".overlay", this).slideDown();
}, function() {
    $(".overlay", this).slideUp();
});
于 2013-04-23T03:44:35.050 回答