鼠标悬停图片,滑动显示文字

HTML代码:

<ul>
<li>
<div class="imgbox">
<a href="#" target="_blank">
<img src="../file/111.jpg"></a>
<div class="text">
<div class="imgtext" style="display: none;">
2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93</div>
</div>
</div>
</li>
<li>
<div class="imgbox">
<a href="#" target="_blank">
<img src="../file/222.jpg"></a>
<div class="text">
<div class="imgtext" style="display: none;">
风景图片效果,水光山色
</div>
</div>
</div>
</li>
</ul>

  

js:

<script type="text/javascript">
$(document).ready(function () {
$(".imgtext").hide();
$(".imgbox").hover(function () {
 $(".imgtext", this).slideToggle(500);//当前图片的文字说明滑动
// $(this).slideToggle(500);图片滑动打开收起
//$(".imgtext").slideToggle(500);两个图片的文字说明都滑动
});
});
</script>

  源码:http://www.divcss5.com/css-texiao/texiao751.shtml

 

posted @ 2014-10-08 15:20  疯狂的多多  阅读(1072)  评论(0编辑  收藏  举报