Jquery show span on hover the image

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

Здесь вы идете немного более простым/разным: демоhttp://jsfiddle.net/csB6w/4/

.next апи: http://api.jquery.com/next/

.toggle апи: http://api.jquery.com/toggle/

Также я скрыл описание, чтобы начать с, И в случае, если вы поместили интервал внутри li демо здесь: http://jsfiddle.net/W7AZb/

Если это соответствует потребности, :)

код

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

Answer 3

Здесь я сделал полные баки для выше проблемы. вы также можете проверить демо-код.

Демо ссылка: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

Answer 4

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