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

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

 

你可能感兴趣的:(图片)