0

嗨，我在这里有一个<ul>标签，<li>里面<img>有一个标签，<span>下面有一个用于描述每个图像的标签。

<ul id="thumbs">
<li>
<img src=".jpg" class="imgme"/>
</li>
<span>
Description
</span>

我希望在悬停图像时显示我的跨度。

我正在使用这个 jquery，但似乎无法正常工作：

$(function() {
   $(".imgme").hover(function() {
    $(this).next("span").show("slow");
    },function(){
    $(this).next("span").hide("slow");
   });
  });

你能告诉我一个例子，如果图像悬停，跨度会向下滑动。谢谢

4

4 回答 4

3

img的父母li的下一个是span。

$(function() {
   $(".imgme").hover(function() {
    $(this).parent().next("span").show("slow");
    },function(){
    $(this).parent().next("span").hide("slow");
   });
  });

或者您可以将事件处理程序绑定在li.

  $(function() {
   $("#thumbs > li").hover(function() {
    $(this).next("span").show("slow");
    },function(){
    $(this).next("span").hide("slow");
   });
  });
于 2012-09-04T04:00:48.113 回答
1

$(".imgme").next("span")- 这没有给出任何东西，因为旁边没有元素img

试试这个

<ul id="thumbs">
    <li>
        <img src="Images/1003057.jpg" class="imgme" />
        <span>Description </span>
    </li>
</ul>

<script type="text/javascript">
    $(function () {
        $(".imgme").hover(function () {
            $(this).next("span").show("slow");
        }, function () {
            $(this).next("span").hide("slow");
        });
    });   
</script>
于 2012-09-04T06:05:53.357 回答
0

在这里你会更简单/不同：demo http://jsfiddle.net/csB6w/4/

.nextapi：http ://api.jquery.com/next/

.toggleapi：http ://api.jquery.com/toggle/

另外我已经隐藏了开始的描述，如果你把跨度放在 li 里面，请看这里的演示：http : //jsfiddle.net/W7AZb/

如果符合需要，:)

代码

$("span").hide();
$(function() {
    $(".imgme").hover(function() {
        $(this).parent().next("span").toggle("slow");
    });
});​
于 2012-09-04T04:11:57.827 回答
0

在这里，我已经为上述问题完成了完整的垃圾箱。您也可以在代码箱上查看演示。

演示链接： http ://codebins.com/bin/4ldqp7v

HTML

<ul id="thumbs">
  <li>
    <img src="http://www.ctspanish.com/quiz/animals/dolphin_swim_md_wht_6133.gif" class="imgme"/>
  </li>
  <span>
    Dolphin
  </span>
  <li>
    <img src="http://futureshine.com/wp-content/uploads/2012/05/jumping-monkey-gif-animation.gif" class="imgme"/>
  </li>
  <span>
    Jumping Monkey
  </span>
</ul>

jQuery

$(function() {
    $(".imgme").hover(function() {
        $(this).closest("li").next("span").show(500);
    }, function() {
        $(this).closest("li").next("span").hide(400);
    });
});

CSS

ul{
  margin:0px;
  padding:0px;
}
#thumbs li{
  list-style:none;
  margin:0px;
  padding:0px;
}
#thumbs span{
  display:none;
}

演示链接： http ://codebins.com/bin/4ldqp7v

于 2012-09-04T05:35:34.390 回答