鼠标悬停在一级菜单上，淡出二级菜单怎么实现？

hrbtvu 2010-09-14 10:37:45

请大家帮忙。没啥思路呢
不想以图片的形式。大概是应该用div，具体的请大伙帮忙。谢谢了。

...全文

779 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

hrbtvu 2010-10-21

打赏
举报

[Quote=引用 14 楼 kala197 的回复:]
点击结贴然后就可以给分了
[/Quote]
我的意思是，分数怎么分。。。。。平均分了

hrbtvu 2010-10-21

打赏
举报

我还是用js实现的，结合css。谢了各位，平均分配分数吧。

kerioz 2010-10-14

打赏
举报

简单的JS就能实现实现设置二级隐藏单鼠标悬浮到一级上面时触发onmouseover事件调用我们编写好的JS方法控制二级的显示就是了

kerioz 2010-10-14

打赏
举报

简单的JS就能实现实现设置二级隐藏单鼠标悬浮到一级上面时触发onmouseover事件调用我们编写好的JS方法控制二级的显示就是了

ETCentury 2010-10-14

打赏
举报

CSS对IE的某些版本不行哦。
自己写下，不是很难！

火龙果被占用了 2010-10-13

打赏
举报

用 CSS 就可以了，Google 上搜一下“CSS 菜单”

closewbq 2010-10-13

打赏
举报

jquery fadeIn

海蟾子 2010-10-13

打赏
举报

推荐看看《锋利的jquery》这本书

hayuanjunbudilei 2010-10-12

打赏
举报

顶下楼上的，你的设计能不能让二级菜单弹出来之后也能选择，并跳转到别的界面。。。

njpingwen 2010-10-08

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=unicode"></HEAD>
<BODY>
<style>
.Nav {

}
.Nav li{
float:left;
display:block;
position:relative;
}
.Nav a{
float:left;
display:block;
position:relative;
padding:2px 10px 2px 10px;
font-size:13px;
text-decoration: none;
}
.Nav li a:hover
{
color:#ffffff;
background:#ea0000;
}
.Nav li table {
display:none;
border-collapse:collapse;
}
.Nav li:hover table, .Nav a:hover table {
display:block;
position:absolute;
top:18px;
left:0;
background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
float:none;
background:#f2f2f2;
color:#000;
width:120px;
border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
background:#565656;
color:#fff;
}
</style>

<div class='Nav'>
<li>
<a href='#'>产品
<table><tr><td>
<a href='#1'>内容管理系统</a>
<a href='#2'>竞争情报系统</a>
</td></tr></table>
</a>
</li>
<li>
<a href='#'>客户服务
<table><tr><td>
<a href='#1'>技术支持</a>
<a href='#2'>留言反馈</a>
<a href='#3'>在线帮助</a>
</td></tr></table>
</a>
</li>
</div>
</BODY></HTML>

LZ试下

kala197 2010-10-08

打赏
举报

点击结贴然后就可以给分了

hrbtvu 2010-09-25

打赏
举报

我咋给分啊，现在是实现了。不知道怎么给，没用jquery，不怎么会。还是用js

kala197 2010-09-20

打赏
举报

JQuery
点击div1

<script type="text/javascript" language="javascript">

   var app_gptypefalg=0;

   function showgptype(li,id){

	 $(".navigationulclass").hide();

	$("#navigationul_"+id).show();

	$('#list_tck').show('fast').css('left',$(li).offset().left+292).css('top',$(li).offset().top);

    }

     function hidegptype(id){

	   setTimeout(function(){if(app_gptypefalg==0){$('#list_tck').hide();}},"500");

     }

  </script>

<div id="gold">

        <ul onmouseout="app_gptypefalg=0;hidegptype();" onmouseover="app_gptypefalg=1">

          <li onmouseover="showgptype(this,1)" ><a href="" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/theme_gil02.jpg',1)"><img src="images/theme_gil.jpg" name="Image12" width="292" height="107" border="0" id="Image12" /></a></li>

          <li onmouseover="showgptype(this,2)"><a href="" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/theme_pl02.jpg',1)"><img src="images/theme_pl.jpg" name="Image13" width="292" height="107" border="0" id="Image13" /></a></li>

          <li onmouseover="showgptype(this,3)" ><a href="" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/theme_it02.jpg',1)"><img src="images/theme_it.jpg" name="Image14" width="292" height="105" border="0" id="Image14" /></a></li>

          <li onmouseover="showgptype(this,4)"><a href="" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/theme_cdk02.jpg',1)"><img src="images/theme_cdk.jpg" name="Image15" width="292" height="106" border="0" id="Image15" /></a></li>

        </ul>

      </div><div id="list_tck" style="display:none;position:absolute;background-image: url(images/bg.gif); z-index:113;" onmouseout="app_gptypefalg=0;hidegptype()" onmouseover="app_gptypefalg=1">

        <ul id="navigationul_1" class="navigationulclass">

          <li ><a href="" target="_blank"></a></li>

          <li ><a href="" target="_blank"></a></li>

        </ul>

        <ul id="navigationul_2" class="navigationulclass">

          <li ><a href="" target="_blank"></a></li>

          <li ><a href="" target="_blank"></a></li>

        </ul>

        <ul id="navigationul_3" class="navigationulclass">

          <li ><a href="" target="_blank"></a></li>

          <li ><a href="" target="_blank"></a></li>

        </ul>

        <ul id="navigationul_4" class="navigationulclass">

          <li ><a href="" target="_blank"></a></li>

          <li ><a href="" target="_blank"></a></li>

        </ul>

      </div>

这个是我自己写的原理就是根据当前鼠标所在的div 计算出他的位置+这个div本身的高和宽就是要显示div的高和宽

_LiuHui 2010-09-20

打赏
举报

自己写JS鼠标悬停事件。。。楼主，记得给分啊。这个应该很简单吧。

lele140 2010-09-20

打赏
举报

JQuery看来很强大啊，一定要学习下。

jiahardstudy 2010-09-19

打赏
举报

[Quote=引用 4 楼 hrbtvu 的回复:]
我菜鸟，不太懂。这个直接就能用吗？
<script type="text/javascript" src="/Script/jquery-1.4.2.js">
[/Quote]
就是直接引入一个jquery的js文件，你自己到网上去下一个放到WEB-INF下面就可以用了