开发者

Hover event to occur independently on separate images

开发者 https://www.devze.com 2023-04-09 18:03 出处:网络
Alright, so I have some code hurr: $(document).ready(function(){ $(\"div.post.photo img\").hover(function () {

Alright, so I have some code hurr:

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $("div.show").slideToggle("fast");
    });
});

Now, it works like a champ. Except for the fact that it occurs on all images simultaneously. I tried to find out how to get it to work on each image separately, but I don't have the darnest clue.

What I am trying to do specifically is have a hover event on an image occur only when you hover over that specific image. When you hover over an image a div pops up with some fancy caption and so on. However, when I hover on one image all the other images show the same thing (I understand why, just not how to fix it).

I figure it has something to do with adding this to it, but I'm new to JQuery and I'm lost.

HTML:

<div class="post photo">
    <img src="source" />
    <div class="show">
        <div class="caption">
 开发者_StackOverflow中文版       Caption
        </div>
    </div>
</div>

Thanks for the help.


$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).next("div.show").slideToggle("fast");
    });
});


With this you can disregards from what position you have put your "show" div into "post photo" class div :

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).parent().children("div.show").slideToggle("fast");
    });
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号