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

实现鼠标经过和鼠标移开的特效,需要一对好用的方法。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>

你可能感兴趣的:(html)