鼠标移动现实二级菜单

*{ margin:opx auto; padding:0px;}

#leibie{ width:500px; height:36px; border:1px solid #03F;}

.yuyan{ float:left; width:100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; font-weight:bold;}

.yuyan:hover{ cursor:pointer; background-color:#96C; color:white;}

#yuyan2{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#0F0; display:none}

#yuyan3{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#FF0; display:none}

#yuyan4{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#0FF; display:none}

#yuyan5{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#F00; display:none}

</style>

<body>

<div id="leibie">

<div class="yuyan" onmouseover="xianshi(‘yuyan2‘)" onmouseout="yincang(‘yuyan2‘)">.net</div>

<div style="float:left; width:0px">

<div id="yuyan2"></div>

</div>

<div class="yuyan" onmouseover="xianshi(‘yuyan3‘)"onmouseout="yincang(‘yuyan3‘)">java</div>

<div style="float:left; width:0px">

<div id="yuyan3"></div>

</div>

<div class="yuyan" onmouseover="xianshi(‘yuyan4‘)" onmouseout="yincang(‘yuyan4‘)">php</div>

<div style="float:left; width:0px">

<div id="yuyan4"></div>

</div>

<div class="yuyan" onmouseover="xianshi(‘yuyan5‘)" onmouseout="yincang(‘yuyan5‘)">IOS</div>

<div style="float:left; width:0px">

<div id="yuyan5"></div>

</div>

</div>

</body>

<script type="application/javascript">

function xianshi(d)

{

var aa = document.getElementById(d);

aa.style.display = "block";

}

function yincang(d)

{

var aa = document.getElementById(d)

aa.style.display="none";

}

</script>

时间： 2024-10-10 09:51:33

鼠标移动现实二级菜单的相关文章

Html中鼠标悬停显示二级菜单的两种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; float: left; } li{ display: none; } </style> <script type="text/

Selenium笔记---鼠标悬停显示二级菜单 点击下拉列表

WebElement menu1=driver....... WebElement menu2=driver....... Actions builder = new Actions(driver); Actions hoverOverRgeistrar = builder.moveToElement(menu1); hoverOverRgeistrar.perform(); menu2.click(); // builder.moveToElement(element).perform();

鼠标悬浮显示二级菜单

1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

鼠标事件-二级菜单

1.用到的包和方法 需求导入ActionChains包: from selenium.webdriver.common.action_chains import ActionChains 2.需求 鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表.以百度首页"更多产品"--"糯米"为例. 3.代码实现 1 # encoding=utf-8 2 from selenium import webdriver 3 from se

纯css实现鼠标感应弹出二级菜单

<!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-Typ

jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="arrowlistmenu"> <h3 class="menuheader expandable">表单</h3> <ul class="categoryitems"> <li><a href="

html和css实现一级菜单和二级菜单学习笔记

实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta ht

js实现二级菜单显示和收缩

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=

第十五篇 JS 移入移出事件 模拟一个二级菜单

JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <