mouseenter()和mouseleave()一对绝佳搭档

最新推荐文章于 2024-09-12 16:31:59 发布

仔仔嚟

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量892

点赞数

分类专栏： html 文章标签：鼠标

本文链接：https://blog.csdn.net/qq_34960569/article/details/51584847

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现鼠标经过和鼠标移开的特效，需要一对好用的方法。mouseenter（）和mouseleave（）绝对是一对绝佳好搭档

代码部分

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css">
.box{width: 200px;height: 200px;overflow:hidden;position: relative; }
.box img{ width: 100%; position: absolute;left: 0;top: 0;}
.box .text{width: 100%;height: 200px;position: absolute;left: 0;top: 200px;background: #CCC;opacity: 0;}
</style>
    <title>jQuery练习</title> 
</head>
<body>
<button>点击</button>
<p style="display:none;">文字</p>
<div class="box">
    <img src="images/1.jpg">
    <div class="text">
        <p>标题</p>
        <p>积分制管理它的核心是认可人的表现，点对点的激励人的行为，其结果是让优秀的人不吃亏，所以单位的体制不同、性质不同都可以使用。</p>
    </div>
</div>
<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript">
$(function(){
//jQuery 
$(".box").mouseenter(function(){
    $(".text").animate({
        top:"0",
        opacity:"1",
            },"slow");
}).mouseleave(function(){

    $(".text").animate({
        top:"300",
        opacity:"0",
    },"slow");
});
//jQuery 
});
</script>

</body>
</html>