鼠标移动到新闻标题，就显示其内容？如何弄啊
日期：2014-05-17 浏览次数：20904 次
鼠标移动到新闻标题，就显示其内容？怎么弄啊？
现在做了个小的简短新闻系统。。
我想把鼠标移动到新闻标题列表的一条新闻标题上。。
就显示一个层，然后新闻内容就显示在里面？怎么做啊？？
现在是只能点击新闻标题进去之后才能浏览新闻。
------解决方案--------------------
现在做了个小的简短新闻系统。。
我想把鼠标移动到新闻标题列表的一条新闻标题上。。
就显示一个层，然后新闻内容就显示在里面？怎么做啊？？
现在是只能点击新闻标题进去之后才能浏览新闻。
------解决方案--------------------
- HTML code
<!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-Type" content="text/html; charset=gb2312" />
<title>JavaScriptLab</title>
<style type="text/css">
<!--
body{margin-left:0px;margin-top:10px;margin-right:0px;margin-bottom:10px;}
#div{margin-left:auto;margin-right:auto;width:76%;}
#pbody{border:#88cee9 1px solid;padding:15px;}
-->
</style>
</head>
<body>
<div id="div">
<div id="pbody">
<script type="text/javascript">
//
var $ = new Object;
$.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){//DOM兼容浏览器
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){//IE
oTarget.attachEvent("on" + sEventType,fnHandler);
}else{//其它
oTarget["on" + sEventType] = fnHandler;
}
};
$.getEvent=function(oe){
if(window.event)
return this.formatEvent(window.event);
else
return $.getEvent.caller.arguments[0];
};
$.addEventHandler(window,"load",function(){
var oDiv=document.getElementById("msglink");
$.addEventHandler(oDiv,"mouseover",showMsg);
$.addEventHandler(oDiv,"mouseout",hideMsg);
var msg=document.getElementById("msg");
$.addEventHandler(msg,"mouseout",hideMsg);
});
function showMsg(){
var oEvent=$.getEvent();
var oDiv=document.getElementById("msg");
oDiv.style.visibility = "visible";
oDiv.style.left=oEvent.clientX + 5;
oDiv.style.top=oEvent.clientY + 5;
}
function hideMsg(){
var oEvent=$.getEvent();
var oDiv=document.getElementById("msg");
if(oEvent.relatedTarget.id!="msg")
oDiv.style.visibility="hidden";
}
</script>
<div id="content">
<a id="msglink">查看详细</a>
</div>
<div id="msg" style="position:absolute;visibility:hidden;background:#88cee9;">
详细内容<br/><br/>详细内容详细内容上打开连接<br/>dskjf<br/>地方法
</div>
</div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
