html鼠标离开效果,web前端小白练习案例-鼠标移入移出效果

web前端群，189394454，有视频、源码、学习方法等大量干货分享

知识点：html标签，css样式(企业样式的活用)，html加css布局思维，代码优化。特效原理(class类名活用)。

👇html代码：

心形

草原

荷花

猫头鹰

草原

荷花

👇css代码：

*{margin:0;/*外边距*/padding:0;/*内边距*/}/* *通用选择器 所有元素 */

#container{/* #+ID选择器名字 */

width:1315px;/*px 像素单位 百分比%*/

height:350px;

/*border:1px solid red;边框 : 大小 实线*/

margin:150px auto;/*auto默认居中*/

}

#container .box1{ /* .+类选择器名字*/

width:250px;

height:350px;

float: left;

margin-right: 20px;

}

#container .box2{

width:250px;

height:350px;

float: left;

margin-right: 20px;/*右边 外边距*/

}

#container .box3{

width:490px;

height:350px;

float:left;

margin-right: 20px;

}

#container .box4{

width:250px;

height:350px;

float:left;

}

#container .text{ position:relative;/*相对定位*/overflow:hidden;}

#container .text p{

height:30px;

width:100%;

background:rgba(0,0,0,0.5);/*0*/

line-height:30px;/*行高*/

text-indent:40px;/*字符缩进*/

color:#fff;/*字体颜色*/

position:absolute;/*绝对定位*/

left:0;/*距离左边多少*/

bottom:-30px;/*底部对齐多少*/

}

#container .con .pictxtop{

width:250px;

height:165px;

}

#container .con .pictxtbotom{

width:250px;

height:165px;

margin-top:20px;

}

👇javascript代码：

//找元素 $("")

$("#container .text").hover(function(){

$(this).find("p").animate({bottom:"0px"})

},function(){

$(this).find("p").animate({bottom:"-30px"})

});