jQuery鼠标悬停事件

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_34277853

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量823

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1625852

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
*,body{
margin: 0;
padding: 0;
font-family: "微软雅黑";
transition:all 1s ease 0s;
}
div{
margin:20px auto 0;
width: 300px;
height: 300px;
background-color:antiquewhite;
}
div p{
font-size:20px;
text-align: center;
line-height: 300px;
color: #666;
}
div.on{
background-color:aqua;
}
</style>
<script>
$(document).ready(function(){
        $("div").hover(function(){
        $("div").addClass("on");
        $("div").children("p").fadeOut(600);

},function(){
        $("div").removeClass("on");
        $("div").children("p").fadeIn(600);

})

})

</script>
</head>
<body>
<div>
<p>芝麻开发</p>
</div>
<p style="width:400px;margin:20px auto 0;line-height:26px;font-size:16px;"><b>使用jQuery完成效果制作。</b><br />鼠标停留色块时，色块插入类（名称on）,色块内文字淡出，时间0.6秒；<br />鼠标移出色块时，色块删除类（名称on）,色块内文字淡入，时间0.6秒；</p>
</body>
</html>