做一个触发函数,mouseover后触发,再做一个域,div,将要先是的内容放到Div中,设置这个div是隐藏的,当触发事件时再显示出来。
不知道我说的明白吗?
不知道我说的明白吗?
解决方案 »
- 求高手解答!JS插入HTML代码!
- 网页中如何实现如本网站的“待解决、已解决、推荐[精华]排行榜、版主管理”这样。。。
- javascript自动计算总价
- 一个关于JS值获得的问题
- 请教大家一个frame中document的问题(将整个页面变灰)
- 求助JAVASCRIP代码问题
- 页面内容选择,sel=document.body.createTextRange() 怎么将选择的开始位置定位
- javascript中出现错误:对象不支持此方法和属性
- 表单对象的name可不可以当作参数传递?
- Jquery validate校验,当把内容删除后,错误数不扣除
- 如何单独设置 div 边框的颜色对比度?
- 如何做一个无工具栏的网页?
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function show(obj){
frameAll();
document.getElementById('s'+obj.id).style.display = 'block';
}
function frameAll(obj){
var all = document.getElementById('all').childNodes;
for(var i = 0; i<all.length;i++){
all[i].style.display = 'none';
}
}
</script>
</head>
<body>
<div id="_1" style="border:1px red solid;float:left;width:200px;height:30px" onmouseover='show(this)'>aaaa</div>
<div id="_2" style="border:1px red solid;float:left;width:200px;height:30px" onmouseover='show(this)'>bbbb</div>
<div id='all' style="clear:both;">
<div id='s_1' style="display:none;border:1px red solid;float:left;width:200px;height:30px"> aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id='s_2' style="display:none;border:1px red solid;float:left;width:200px;height:30px"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
</body>
</html>
<head>
<script type="text/javascript">
//显示菜单
function showTooltip(e,id){
var tooltip = document.getElementById(id);
tooltip.style.postion = 'absolute';
tooltip.style.top = e.offsetTop + 20;
tooltip.style.left = e.offsetLeft + 20;
tooltip.style.display = 'block';
}
//隐藏菜单
function hideTooltip(id){
var tooltip = document.getElementById(id);
tooltip.style.display = 'none';
}
</script>
</head>
<body>
<span onmouseover="showTooltip(this,'tooltip')" onmouseout="hideTooltip('tooltip')">
<img src="1.jpg">
</span>
<div id="tooltip" class="tooltip">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
<span>
</html>为了美观,最好还有css,如果你要让它显示在图片下面的话
div.tooltip{
display: none;
padding: 2px;
}