Question

您好我在这里有一个<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");
   });
  });

你能告诉我一个例子，如果图像处于悬停状态，跨度将向下滑动。感谢

Answer 1

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");
   });
  });

Answer 2

$(".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>

Answer 3

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

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

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

此外，我还隐藏了描述，和，以防您将范围放入li中，请参阅演示：http://jsfiddle.net/W7AZb/

如果符合需要，:)

<强>码

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

Answer 4

在这里，我为上述问题做了完整的垃圾箱。你也可以在代码栏上查看演示。

演示链接： 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

Jquery显示跨度悬停图像

4 个答案: