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

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

 

转载于:https://www.cnblogs.com/vakeynb/p/4011287.html