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");
});
});
精彩评论