鼠标悬浮弹出下拉菜单,这样的效果怎么做,具体的请看图
请看图,鼠标悬浮在红色框标注的全站gps就会弹出下面一个表,这个效果怎么实现呢?回答好的或者发我QQ1442368669我最佳30分...
请看图,鼠标悬浮在红色框标注的全站gps就会弹出下面一个表,这个效果怎么实现呢?回答好的 或者发我QQ1442368669 我最佳30分
展开
3个回答
展开全部
里面用到两个图片,我发你QQ上,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="width:798px; height:265px; overflow:hidden;">
<div style=" width:798px; height:35px; background:url(t.jpg) #fff; position:relative; z-index:2;">
<div id="menu_switch" style="width:67px; height:22px; position:absolute; left:10px; top:7px; border:1px solid #f00;"></div>
</div>
<div id="menu" style="width:798px; height:230px; background:url(b.jpg) #00f; position:relative; z-index:1; top:-230px;"></div>
</div>
<script type="text/javascript">
window.onload = function(){
var T;
document.getElementById("menu_switch").onmouseover = function(){
T = setTimeout(function(){
var T1 = setInterval(function(){
var top = document.getElementById("menu").style.top;
if(parseInt(top)<0)
{
document.getElementById("menu").style.top = parseInt(top) + 5 + "px";
}
else
{ clearInterval(T1);}
},1);
},500);
}
document.getElementById("menu_switch").onmouseout = function(){
clearTimeout(T);
document.getElementById("menu").style.top = "-230px";
}
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="width:798px; height:265px; overflow:hidden;">
<div style=" width:798px; height:35px; background:url(t.jpg) #fff; position:relative; z-index:2;">
<div id="menu_switch" style="width:67px; height:22px; position:absolute; left:10px; top:7px; border:1px solid #f00;"></div>
</div>
<div id="menu" style="width:798px; height:230px; background:url(b.jpg) #00f; position:relative; z-index:1; top:-230px;"></div>
</div>
<script type="text/javascript">
window.onload = function(){
var T;
document.getElementById("menu_switch").onmouseover = function(){
T = setTimeout(function(){
var T1 = setInterval(function(){
var top = document.getElementById("menu").style.top;
if(parseInt(top)<0)
{
document.getElementById("menu").style.top = parseInt(top) + 5 + "px";
}
else
{ clearInterval(T1);}
},1);
},500);
}
document.getElementById("menu_switch").onmouseout = function(){
clearTimeout(T);
document.getElementById("menu").style.top = "-230px";
}
}
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
如果你完全不懂css还真不是两句话解释清楚的
更多追问追答
追问
我懂CSS啊 我只是想知道 哪个鼠标放上去 是怎么弹出隐藏的哪个div的 还有这个div是怎么用css控制位置的啊
追答
1.用css了的hover可以做到鼠标滑过后的效果
2.用css属性display:block及display:none来控制div的显示跟隐藏
3.用css属性position:absolute;top:0;left:0;来控制位置(数字可变);或者用padding和margin来控制
4.设置hover之前的div的display:none;设置hover之后的div的display:block;这样就实现了弹出和隐藏的效果
5.如果你完全没有看懂我说什么,那么你根本不懂css,需要虚心学习了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
可以用css做 也可以用js做
更多追问追答
追问
怎么做呢?
追答
css 用ul套ul 写visible:hidden. 用这个思路 自己想想就知道了、
js 直接百度一下就好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询