JavaScript 修改鼠标所在随机控件的属性
比如以下的代码,能否修改成只有一个function out()就能满足所有菜单的显示,当然,所有网页的控件都是固定的,而且是已知的。。 现在只是不知道鼠标会移动到哪个控件而已。。请不要用switch语句历遍所有控件,要尽量简洁的代码。谢谢。
先给80分,如果回答满意,符合我的要求,再追加100分。谢谢。
<SCRIPT language=javascript><!--
function out()
{
if(window.event.toElement.id!="menu" && window.event.toElement.id!="link")
menu.style.visibility="hidden";
}
function out1()
{
if(window.event.toElement.id!="menu1" && window.event.toElement.id!="link")
menu1.style.visibility="hidden";
}
</SCRIPT>
<div id="back" onmouseout="out()"style="position:absolute;top:225;left:250;width:160;height:40;z-index:1;visibility:visible;">
<span id="menubar" onmouseover="menu.style.visibility='visible'">
<font color=red size=2>菜单一</span>
<div border=1 id="menu" style="position:absolute;top:15;left:0;width:75;height:10;z-index:2;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
<a id="link" href="LINK2.htm">LINK2</a>
</div>
</div>
<div id="back" onmouseout="out1()"style="position:absolute;top:225;left:330;width:160;height:40;z-index:3;visibility:visible;">
<span id="menubar" onmouseover="menu1.style.visibility='visible'">
<font color=red size=2>菜单二</span>
<div border=1 id="menu1" style="position:absolute;top:15;left:0;width:50;height:10;z-index:4;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
</div>
</div>
</div> 展开
你可以用下jQuery的菜单插件,有很多的。使用起来代码简洁并且操作非常方便。能符合你的要求
样式如下:
下面是使用的代码:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/superfish.css" media="screen">
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.js"></script>
<script type="text/javascript">
(function ($) { //create closure so we can safely use $ as alias for jQuery
$(document).ready(function () {
// initialise plugin
var example = $('#example').superfish({
//add options here if required
});
// buttons to demonstrate Superfish's public methods
$('.destroy').on('click', function () {
example.superfish('destroy');
});
$('.init').on('click', function () {
example.superfish();
});
$('.open').on('click', function () {
example.children('li:first').superfish('show');
});
$('.close').on('click', function () {
example.children('li:first').superfish('hide');
});
});
})(jQuery);
</script>
function out(node){
if(node.id!="menu" &&node.id!="link")
node.style.visibility="hidden";
}