jQuery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了。代码如下,记得引入Jquyer库。(当鼠标移动到id=menu的div上的时候,显示id=list的div,然后将鼠标再次移动到id=list的div上的时候,list的div也不会隐藏)当然也可以制作成打赏效果或图片提示等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function () {
$("#list").hide();
$("#menu").hover(function () {
$("#list").show();
}, function () {
$("#list").hide();
})
// 鼠标移动到list的div上的时候list div不会被隐藏
$("#list").hover(function () {
$("#list").show();
}, function () {
$("#list").hide();
})
});
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="menu" style="width: 50px; height: 50px; border: 1px solid red;">
打赏</div>
<div id="list" style="width: 168px; height: 168px; ">
<img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/1150383209.jpg" alt="Pulpit rock" width="168" height="168">
<img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/4196275270.jpg" alt="Pulpit rock" width="168" height="168">
<img border="0" src="https://www.xysoft.cc/usr/uploads/2018/08/qqqr.jpg" alt="Pulpit rock" width="168" height="168">
</div>
</div>
</form>
</body>
</html>
微信扫描下方的二维码阅读本文
阅读剩余
版权声明:
标题:jQuery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
作者:admin
链接:https://www.kmtky.com/291.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
标题:jQuery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
作者:admin
链接:https://www.kmtky.com/291.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
THE END