3

この Web サイトと同様の機能を取得しようとしています。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

.hover()を使用

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

これはどうですか？

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

サムネイルではなく、テストに集中します。

于 2013-04-23T03:28:24.403 に答える