搜索

鼠标移入移出改变div颜色,通过点击按钮隐藏或者显示div

原创 2019-03-10 12:40:30 489
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>jq的切换动画</title>    &n
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq的切换动画</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        div{width: 200px;height: 200px;margin: 0 auto;border: 1px solid black;}
        button{display: block;margin: 0 auto;}
    </style>
</head>
<body>
    <div></div>
    <button>点击显示/隐藏</button>
</body>
    <script type="text/javascript">
    $(document).ready(function(){
    $('div').hover(function(){
    $(this).css('background','pink');
    },function(){
    $(this).css('background','#fff');
    })
    $('button').click(function(){
    $('div').toggle();
    })
    })
</script>
</html>



笔记:

hover(over,out)鼠标的移入移出事件

toggle() 如果元素是可见的,就隐藏,否则相反


批改老师:韦小宝批改时间:2019-03-10 13:21:54
老师总结:写的很不错 jQuery实现这些效果比js要简单的多了吧

发布手记

热门词条