JSP网页，HTML怎么用div盒子做弹出式菜单，就是当鼠标移动到目标的超链接时，就会自动弹出一个菜单？

这个菜单只有在鼠标停留在超链接时才会出现，一旦移走鼠标就会自动消失，而且菜单里面是超链接，据说是用层的隐藏与显示来实现？？求具体代码，最好简单明了，谢谢！

推荐答案推荐于2018-03-02

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/WOO7ttevOttej7WBv7O.html

其他回答

第1个回答 2016-09-03

相对定位和绝对定位，把盒子相对定位，给超链接那个盒子相对定位，不加也行，
给菜单的那个盒子绝对定位，默认是隐藏的也就是display：none，给链接加个伪类hover或者鼠标悬浮事件，onmouseover。具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title></title>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
margin-right: 50px;
}
ul{
list-style: none;
}

div{

width: 120px;
height: 100px;
position: absolute;
border: 1px solid red;
display: none;
}
#d1{
width: 120px;

height: 100px;
position: absolute;
border: 1px solid blue;
display: none;
}
ul li:hover div{
display: block;
}

ul #t:hover div{
display: block;
}

ul #f:hover #d1{
display: block;
}
</style>
</head>
<body>

<ul>
<li id="f">春<div id="d1"></div></li>
<li>夏</li>
<li id="t">秋<div></div></li>
<li>东<div></div></li>

</ul>

</body>
</html>

我没有在div里面写列表，你要写列表直接在div里面加就可以了

第2个回答 2016-07-30

使用div+css就可以实现，使用样式display:block;
块级元素默认就是block，思路是:当页面加载时，一级菜单下的二级菜单display设置为none；鼠标移动时样式设为block就可以实现了。可以参考标准之路网站的10天学会div+css
第八天的内容。

第3个回答 2016-07-12

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
.tankuang {
height: 100px;
width: 100px;
background-color: #000000;
display: none;
}
</style>
</head>

<body>
<script>
function block() {
document.getElementsByClassName("tankuang")[0].style.display = "block";
}

function none() {
document.getElementsByClassName("tankuang")[0].style.display = "none";
}
</script>

<div>
<a href="#" onmousemove="block()" onmouseout="none()">悬浮上来</a>
<div class="tankuang"></div>
</div>

</body>

</html>

第4个回答 2016-08-18

可以使用jQuery很简单就能做出来
$("a").mouseover(function(){
$("div").show();

});
$("a").mouseout(function(){
$("div").hide();

});

1 2 下一页

相似回答

js,jsp,html,如何实现鼠标放上去,会弹出一个提示框出来答：把onclick 换成onmouseover就可以了

html鼠标经过自动展开和点击展开代码。答：1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。3．运行代码，效果如下。4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。5．运行代码，效果...

html中,怎么做一个弹出式的大小固定的小窗口?答：1、点击按钮 2、出现一个自己控制的500*200的弹框，同时浏览区背景为灰色 3、点击红色区域右上角X号，弹窗会消失

求大牛指导 jsp页面有个p标签 当鼠标移到那里时会在鼠标下方出现p标签...答：可以用元素的 title 属性，鼠标放上去后自动显示提示信息 <div title="提示信息"></div> 也可以通过纯 CSS 或者加脚本控制用 div 来模拟，鼠标放上去后显示提示，离开后隐藏。把提示框的位置确定好就行

关于网页各种功能如何实现,应该学习什么?答：其实FRONTPAGE2003页面下有三个标签,分别是“普通”、“HTML”、“预览”,用“预览”一样能看到。不过我自己觉得不如另外用浏览器打开来得实在,呵呵,个人习惯,你尽可以用预览这个标签来看。 2、改变字体的大小和颜色你可以用鼠标在你想改变颜色的字上拖动,使之成为反色字,就算选中啦。我想你如果会复制粘贴就该会...

网页设计制作详细流程答：5、整个网页都做好以后,只要点击保存按钮,页面就做好了,新手只要对页面进行宣传,并将网页提交到搜索引擎,一旦页面被收录,那么访客将会更容易找到你的网页。资料拓展: 网站的分类: 1、根据网站所用编程语言分类:例如asp网站、php网站、jsp网站、Asp.net网站等; 2、根据网站的用途分类:例如门户网站(综合网站)、行业...

jsp做隐藏的下拉菜单怎么做(如图)答：onclick事件,点击时如果是收起来（隐藏display:none）的就把它展开（显示display:block）,如果是展开（显示display:block）的就把它收起来（隐藏display:none）,<table> <tr> <td onclick= "if(aaa.style.display== 'none '){aaa.style.display= 'block ';}else{aaa.style.display= 'none ';}...

jsp是什么文件格式,怎么打开?答：JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页，打开方式如下：1、我们先打开IE浏览器，如下图所示：2、再找到并打开JSP源文件所在的文件夹，如下图所示：3、鼠标左键选中并按住jsp文件不放，拖动到浏览器窗口并释放鼠标左键，如下图所示：4、浏览器中显示...

如何用html编写一个简单的网页答：3、然后输入最简单的HTML文本语言。代码如下：<html> <body> 最简单的网页 </body> </html> 4、保存并关闭txt文本，然后修改我们txt文本的扩展名为html，此时会弹出警告框，提示我们修改后可能会导致文件不能使用，这是操作系统的一个处理逻辑，为了防止无意或恶意的损坏文件的行为。5、无需担心，...