JS IE onMouseLeave onMouseEnter

最新推荐文章于 2024-09-12 16:31:59 发布

原创最新推荐文章于 2024-09-12 16:31:59 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

JS IE onMouseLeave onMouseEnter 专栏收录该内容

0 篇文章

订阅专栏

本文通过一个具体的HTML页面案例展示了如何使用JavaScript来控制页面元素的显示与隐藏，并实现基本的鼠标交互效果。通过对页面结构的解析及JavaScript函数的介绍，读者可以了解到如何在网页中创建动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script>
		function hiddenRightSelect(leftSelectId, rightSelectId) {
			document.getElementById(rightSelectId).style.display = "none"; // 隐藏动态加载Select框
		}
		function displaySelect(leftSelectId, rightSelectId, type) {
			var obj = document.getElementById(rightSelectId);

			obj.style.display = 'block';
		}
		function stopEvent(obj,e){
			if (e.toElement != obj) {
				if (obj != e.toElement.parentNode) {
					event.cancelBubble=true
				}
			}

		}

  </script>
 </head>

 <body>
  <div 
  style="width:615px;height:208px;border :1px solid #000000;"
  onMouseLeave="hiddenRightSelect('multiChannelSelect','ftCmpSameExtPara.channelTypeCode2');"
  onMouseEnter="displaySelect('multiChannelSelect','ftCmpSameExtPara.channelTypeCode2',1);"
  onclick="alert('外层');"
  >
	  <div id="multiChannelSelect" style="width:300px;height:200px;border :1px solid red;float:left;margin:2px"
	  >
				qqqqqqqqqqqqq
	  </div>
	  <div id="ftCmpSameExtPara.channelTypeCode2" style="width:300px;height:200px;border :1px solid red;float:left;display:none; margin:2px"
	  onclick="alert('内面');"
	  >
				bbbbbbbbbbb
	  </div>
  </div>
 </body>
</html>