[JavaScript] 用 jQuery 显示隐藏内容


显示隐藏内容

1. 主要需求

  • 根据要求实现当鼠标移入按钮时显示内容,当鼠标移出按钮时隐藏内容。
  • 完成效果如下图所示:
    在这里插入图片描述

2. 代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>提示信息</title>
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
<button type="button" id="showhide" >移入显示提示信息</button>
<div id="divid" style="width:100px;height:100px;border:1px solid lightgray;display: none;">提示信息:&nbsp;...</div>
<script type="text/javascript">

    let btn = $('#showhide');//获取按钮元素
    let div = $('#divid');//获取div元素

    //实现方式一
    // $(()=>{
    // 	btn.mouseover(function(){
    // 		div.css("display","block");//显示div
    // 	});//当鼠标移入时
    // 	btn.mouseout(function(){
    // 		div.css("display","none");//隐藏div
    // 	});
    // });

    //实现方式二
    btn.hover(
        ()=>{//鼠标移入
            div.show();//显示div
        }
        ,
        ()=>{//鼠标移出
            div.hide();//隐藏div
        }
    );//绑定移入移出事件

</script>
</body>
</html>

原文链接:https://qwert.blog.csdn.net/article/details/105454642

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Regino/article/details/105454642