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 に答える