显示隐藏内容
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;">提示信息: ...</div>
<script type="text/javascript">
let btn = $('#showhide');
let div = $('#divid');
btn.hover(
()=>{
div.show();
}
,
()=>{
div.hide();
}
);
</script>
</body>
</html>
原文链接:https://qwert.blog.csdn.net/article/details/105454642