Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

半岛未凉° 2017-05-01 福利分享 687 已收录 本文共949个字,预计阅读需要3分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了。代码如下,记得引入Jquyer库。(当鼠标移动到id=menu的div上的时候,显示id=list的div,然后将鼠标再次移动到id=list的div上的时候,list的div也不会隐藏)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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="js/jquery.js" type="text/javascript"></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: 300px; height: 100px; border: 1px solid red;">
</div>
<div id="list" style="width: 300px; height: 300px; ">
</div>
</div>
</form>
</body>
</html>

温馨提示:本文最后更新于2017年5月1日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!

上一篇:

下一篇:

Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。

喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡