适合新手学习的Query制作一个鼠标滑过显示隐藏浮动层的网页特效代码,代码如下:
无标题文档
效果如下:
鼠标移开:

图(1)
鼠标悬停

图(2)
$(document).ready(function(){
$(".imgtext").hide();
$(".chaonanwo").hover(function(){
$(".imgtext").slideToggle(1000);
});
});
.chaonanwo{ width:300px; height:300px; margin:auto; position:relative;}
.chaonanwo img{ width:300px; height:300px; border:0px; display:block;}
.text{ width:300px; height:auto; background-color:#FFFFFF; FILTER: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; position:absolute; left:0px; bottom:0px;}
.imgbt{ width:280px; height:30px; padding:0px 10px;}
.imgbt span{ display:block;}
.span_a{ width:210px; line-height:30px; float:left; font-size:14px; color:#FF3366; padding-right:10px;}
.span_b{ width:60px; line-height:30px; float:left; font-size:16px; color:#FF3366; font-family:Georgia, "Times New Roman", Times, serif; text-align:right;}
.clear{ display:block; font-size:0px; height:0px; line-height:0px; clear:both;}
.imgtext{ width:280px; height:80px; padding:20px 10px; color:#333333; font-size:12px;}
效果如下:
鼠标移开:

图(1)
鼠标悬停

图(2)