jsp js 鼠标移动到指定区域显示选项卡示例,离开时不显示

最新推荐文章于 2021-03-06 07:55:27 发布
最新推荐文章于 2021-03-06 07:55:27 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： JAVA开发 文章标签： JS jsp 鼠标移动显示选项卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinxianluo/article/details/9093745
版权
本文介绍了如何使用JavaScript和JSP实现鼠标移动到指定区域时显示选项卡，并在鼠标离开时自动隐藏。通过示例代码展示了如何创建响应式导航菜单，包括样式设计和事件监听，适用于网页交互效果的增强。
摘要由CSDN通过智能技术生成

-1、右侧弹出导航菜单完整代码



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>右侧弹出导航菜单－－柯乐义</title>
<style type="text/css">
.my_left_category{
width:150px;
font-size:12px;
font-family:arial,sans-serif;
letter-spacing:2px;
}
.my_left_category h1{
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/top.gif);
height:20px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
padding-left:15px;
padding-top:8px;
margin:0px;
color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;
padding:3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .my_left_cat_list h2 a:hover {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
width:148px;
height:26px;
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/right.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/line.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
}
.my_left_category a:hover{
text-decoration:underline;
color:#ff3333;
}
.my_left_category h3{
margin:0px;
padding:0px;
height:26px;
font-size:12px;
font-weight:normal;
display:block;
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{ line-height:26px;}
.my_left_category .h3_cat{
display:none;
width:204px;
position:absolute;
left:123px;
margin-top:-26px;
cursor:auto;
}
.my_left_category .shadow{
position:inherit;
background:url(http://www.keleyi.com/keleyi/phtml/rightmenu/back.gif) left top;
width:204px;
}
.my_left_category .shadow_border{
position:inherit;
width:200px;
border:1px solid #959595; margin-top:1px;
border-left-width:0px;
background:url(http://www.keleyi.com/keleyi/phtml/rightmenu/height.gif) no-repeat 0px 21px;
background-color:#ffffff;
margin-bottom:3px
}
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
.my_left_category .shadow_border ul li {
list-style:none;
padding-left:10px;
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/justright.gif);
background-repeat:no-repeat;
background-position:0px 8px;
float:left;
width:75px;
height:26px;
overflow:hidden;
letter-spacing:0px;
}
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
.my_left_category .active_cat h3 { font-weight:bold}
.my_left_category .active_cat h3 span{ display:none;}
.my_left_category .active_cat div{display:block;}
</style>
</head>
<body>
<div class="my_left_category">
<h1>分类导航</h1>
<div class="my_left_cat_list">
<h2><a href="#">按网站类别</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">企业建站</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="http://www.keleyi.com">柯乐义</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">韩国男装</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">韩国童装</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="http://www.keleyi.com">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="http://www.keleyi.com">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- again -->
<h2><a href="#">按品牌选货</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">柯乐义</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="http://www.keleyi.com">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="http://www.keleyi.com">网站建设</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">网站制作</a></li>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">网站设计网站设计网站设计网站设计</a></li>
<li><a href="#">网站广告</a></li>
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEOqqqqqqqqeeeeqqqqqqq</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">网站程序</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">ASP.Net</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat_1" οnmοuseοver="this.className='h2_cat_1 active_cat'" οnmοuseοut="this.className='h2_cat_1'">
<h3><a href="#">其他网站</a></h3>
</div>
<!-- again -->
<h2><a href="#">按价格选货</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">低端价位</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">50元以下</a></li>
<li><a href="#">50-100元</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="http://www.keleyi.com">中高端价位</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">100-150元</a></li>
<li><a href="#">150-200元</a></li>
<li><a href="#">200-300元</a></li>
<li><a href="#">300元以上</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- again -->
<h2><a href="#">超值特价区</a></h2>
<h2><a href="#">现货区</a></h2>
</div>
</div>
</body>
</html>


http://www.keleyi.com/menu/javascript/p2.htm


0、下方弹出导航菜单代码

<!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>
    <title>css+div+js下拉菜单导航--柯乐义</title>
    <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;}
#nav{left:0px;right:0px;width:600px;position:fixed;margin-left:auto;margin-right:auto;top:175px;height:30px;}
#nav li{float:left;text-align:center;}
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;}
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;}
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;}
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;}
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;}
</style>
</head>
<body>


<div style="position:fixed;top:0px;"><script type="text/javascript"><!--
                                         google_ad_client = "ca-pub-7740261255677392";
                                         google_ad_slot = "8839078091";
                                         google_ad_width = 728;
                                         google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>






<div id="nav">
<ul>
    <li οnmοuseοut="this.className='menu2'" οnmοuseοver="this.className='menu1'" class="menu2">Javascript
    <div class="list">
    <a href="http://www.keleyi.com/a/bjac/687f154f53ab3aef.htm"  target="_blank">js中substring</a><br />
    <a href="http://www.keleyi.com/a/bjac/ff33a0656183eba.htm"  target="_blank">客户端代码着色</a><br />
    <a href="http://www.keleyi.com/a/bjac/6e893bbacf5184f3.htm"  target="_blank">js实现代码着色</a><br />
    <a href="http://www.keleyi.com/a/bjac/21e2e5321077656f.htm"  target="_blank">11个js技巧</a><br />
    <a href="http://www.keleyi.com/a/bjac/d32ac9822ef75ef9.htm"  target="_blank">tab切换样式</a><br />
    <a href="http://www.keleyi.com/a/bjac/fca5ac722271d2d5.htm"  target="_blank">js获取可见域宽</a><br />
    <a href="http://www.keleyi.com/a/bjac/ade2f3941bd75ba.htm"  target="_blank">js导航菜单</a>
    </div>
    </li>
    <li οnmοuseοut="this.className='menu2'" οnmοuseοver="this.className='menu1'" class="menu2">jQuery

最低0.47元/天 解锁文章
yinxianluo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp鼠标移动右侧显示选项卡，移开时不显示
06-14
jsp鼠标移动到指定区域，右侧显示选项卡，鼠标移开时则不显示
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
11-30
-1、右侧弹出导航菜单完整代码 代码如下: <!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> <meta http-equiv=”Content-Type” content=”text/html; charset=utf8″ /> <title>右侧弹出导航菜单－－柯乐义</title> <style
JSP页面 鼠标移动到页面元素上时，显示完整内容
罗格的博客
05-22 1768
第一种方法 <td> <c:if test="${item.compareFlag=='W'}"><div>未比对</div></c:if> <c:if test="${item.compareFlag=='Y'}"><div>一致</div></c:if> <c:if test="${item.compareFlag=='N'}"><div id="co
js中拼凑的jsp页面的鼠标进入事件
dzonel
11-24 652
$('.class或者#id').die().live("hover",function(event) {}
jquery 鼠标经过显示 信息小卡片
weixin_30702413的博客
12-06 218
经常玩google plus 的，觉得它有一个效果真的很不错，如图： 鼠标经过用户名，就会显示这样的小卡片。虽然不是做前端的，不过对这一效果也研究了一下怎么实现。 <script> $(document).ready(function(){ $(function(){ $(".userID").HoverCard(); }); ...
JavaScript
03-28
- **鼠标事件**：常见的鼠标事件包括mouseover（鼠标移入）和mouseout（鼠标移出）。 - **实例**：仿网易的选项卡功能实现，可以通过监听点击事件切换不同的内容区域。 - **水平菜单**：实现水平导航菜单，当鼠标...
jQuery官方UI插件
08-08
5. **拖放(Draggable)和可叠放(Droppable)**：这两个组件一起工作，实现了元素的拖放功能，常用于文件管理器、布局编辑器等场景，允许用户通过鼠标移动元素到特定区域。 6. **可排序(Sortable)**：这个组件使列表或...
鼠标移入侧边栏一级菜单后，二级菜单显示
会飞的猪0629
07-03 6685
就是简简单单的一个小功能，鼠标移入侧边栏的一级菜单后，相对应的二级菜单显示。
页面鼠标移入移出、点击显示隐藏的处理
yan_dk的专栏
03-06 864
我们在页面开发中比较常见的功能是鼠标移入移出，或点击时，需要特定元素显示或隐藏的操作，实现方法很多，下面给出比较通用的方法 注：需要页面引入jquery，这个不用多说。 页面元素代码部分 <div class="freepub_box" id="d_freepub_box" style="display:none;"> <div class="freepub_box_sub"> <div class="freepub_title"&gt...
js 实现鼠标点击tab栏选项卡切换，下面相应内容跟随变化
weiwandaixu_zx的博客
06-12 2399
<style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } ...
js鼠标经过选项卡
01-26
js鼠标经过选项卡，js选项卡特效，能简单修改，兼容各种浏览器
使用JavaScript实现鼠标移进按钮显示移出隐藏功能
weixin_44538411的博客
01-19 6862
开发工具与关键技术：DW、JavaScript实现功能 作者：陈隆 撰写时间：2019年01月17日 下面使用简单的js实现移进显示移出隐藏常用的功能，先创建一个HTML文件，然后把需要的代码写到HTML页面里， 先写一个button按钮作为鼠标移动的目标，接着把要显示和隐藏的表格写出来（这里内容不定，可以根据需求来写），（具体代码看截图） 写好HTML之后接下来就是写CSS样式了，一样是先创...
JavaScript作业----(3)选项卡之鼠标移入切换
yoke743的博客
05-30 836
三.选项卡&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Aut
JS实现鼠标移入移出控制图片的切换效果
热门推荐
幸运的梦之星
03-26 1万+
背景 在看专业英语的时候，学习JS的Timer Event.正好有一个例子，实现的是，图片自动切换，当鼠标点击图片的时候，停止切换。于是想要动手实践一下，并且添加上自己的想法。于是就有了下面的图片和代码。 首先，看一下效果图： 页面加载的时候，图片是每隔1s进行一次切换的，当鼠标移入的时候图片放大，并且停止切换，当鼠标移出的时候，图片缩小为原大小，继续进行切换。 关键代
鼠标移入就显示弹框，移出弹框就消失
java_zhaoyanli的专栏
08-08 7932
html: 菜单 香蕉 苹果 鸭梨 橙子 css: #menu{ width:8.
css,js实现在鼠标移动到一个位置在这个位置下面显示一个已经存在的div，这个div的位置随意
chenxi03269的博客
03-21 8465
这是要显示的内容     //当鼠标移动到这个时候 移动到这 $('.explain1').hover(function(){                            var eTop=$(this).offset().top;               var eRight=$(this).offset().left;           
JS小练习之鼠标移入移出实现的一些效果
weixin_41586886的博客
06-01 4666
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标移入移出显示效果&lt;/title&gt; &lt;style&gt; #di
实例精剖：js实现鼠标悬浮时指定位置弹出图片
flying meng的菜鸟居
05-15 2837
当然，弹出有两种方式，在此就不显示“在原位置替换”的方式了，在其他博文中有提到。 其实这个很简单的实现，就是利用js中document操纵文本的特性。 下面是我实现某官网时所用的方式： <div class="footer-top-right-bottom"> <a href="javascript:void(0)" onMouseout="hid...
jsp怎么做到把鼠标移到那就显示页面
最新发布
06-11
如果您是指在网页上鼠标移动到某个区域时，可以显示出隐藏的页面，那么可以使用JavaScript来实现。下面是一个简单的示例代码： ...这样就可以实现鼠标移动到某个区域时显示出隐藏的页面的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值