如何让鼠标经过文字时在下方显示一个div,离开后就消失

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

人印余
2012-08-03 · TA获得超过199个赞

知道小有建树答主

回答量：113

采纳率：0%

帮助的人：81.4万

我也去答题访问个人页

关注

展开全部

这里会涉及两个动作，一个是鼠标经过文字，然后出现div，二是鼠标离开文字，然后div消失
显示文字的部分应该这么写:<span onmouseover="aa(event)" onmouseout="bb(event)">hello,my dear</span>
并设置隐藏层如下：
<div id="div" style="display:none">我是div</div>
然后js部分对应上面鼠标事件的两个方法这么写：
function aa(event){
var a=document.getElementById("div");
a.style.display="block"; //div初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
a.style.left=event.clientX+15; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
a.style.top=parseInt(event.y)+5+document.body.scrollTop;
a.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动

}
function bb(event){
var b=document.getElementById("div");
if(b.style.display=="block"){//如果显示的，则隐藏
b.style.display=="none";
}
}

已赞过 已踩过<

评论收起

kuaile221520
推荐于2017-10-01

知道答主

回答量：64

采纳率：0%

帮助的人：22.4万

我也去答题访问个人页

关注

展开全部

<style>
<script type="text/javascript">
function display1(tNum){
document.getElementById('yc'+tNum).style.display='block'
document.getElementById('lc'+tNum).style.display='none'
}
function display2(tNum){
document.getElementById("yc"+tNum).style.display='none'
document.getElementById('lc'+tNum).style.display='block'
}
</script></head>
<body>
<div >
<p>sometext......</p>
<span id="yc1" style="display:none">
     <p>隐藏的文字... </p>
     <a onmouseover="display2(1)" href="#">关闭</a>|<a href="#">e-map</a>
</span>
<span id="lc1"> 
     <a onmouseover="display1(1)" href="#"> 更多详情</a>|<a href="#">e-map</a>
</span>
<p>sometext......</p>
<span id="yc2" style="display:none">
     <p>隐藏的文字... </p>
     <a onmouseover="display2(2)" href="#">关闭</a>|<a href="#">e-map</a>
</span>
<span id="lc2"> 
     <a onmouseover="display1(2)" href="#"> 更多详情</a>|<a href="#">e-map</a>
</span>
</div>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何让鼠标经过文字时在下方显示一个div,离开后就消失

其他类似问题

为你推荐：