鼠标悬停图片,滑动显示文字
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
——当我们面对枯燥窘迫甚至是痛苦的生活时,只是缺少了提枪上阵去干他娘的勇气!
浙公网安备 33010602011771号