javascript：鼠标移至元素上，在元素上方出现div
感谢您抽空来此解答。设想：鼠标移至一个超链接上方时，超链接上方出现一个div，里面是文字，而这些文字是可以在不同的超链接上显示不同内容。已包含jQuery。（代码已有简化...
感谢您抽空来此解答。
设想：鼠标移至一个超链接上方时，超链接上方出现一个div，里面是文字，而这些文字是可以在不同的超链接上显示不同内容。
已包含jQuery。
（代码已有简化）
====js部分====(ps. 变量dere是希望出现的文字；变量mention是来表示<li>的顺序编号)
var dere = Array(); //文字们
dere[1]="aaaaa";
dere[2]="bbbbb";
dere[3]="ccccc";
var mention = 0;
$("#name").mouseover(function(){ //鼠标移至上方函数
mention = parseInt(document.getElementbyId("name").parentElement.id);//<a>的上级<li>的id赋值给mention
document.getElementById("describe").innerHTML = dere[mention];//写入文字
document.getElementById("describe").style.top = toString(parseInt(document.getElementById(document.getElementbyId("name").parentElement.id).style.top) - 40),"px";//确定位置，想要出现于指定<a>元素上方
$("div#describe").fadeToggle();//jQuery的淡入淡出
});
====CSS====
.describe{
display: none; //设定初始为不可见
}
====html结构====
<div id="describe" class="describe"></div> <!--这里是需要出现的div框-->
<li id="01"><a id="name"></a></li> <!--各个超链接-->
<li id="02"><a id="name"></a></li>
<li id="03"><a id="name"></a></li>
====Code End===
虽然按这样写了，不过仍然不能在各个浏览器中实现（鼠标移至<a>上方后无反应）
虽不知里面有没有语法错误或其他逻辑错误……
嘛、还是感谢大神对此解答。 展开
设想：鼠标移至一个超链接上方时，超链接上方出现一个div，里面是文字，而这些文字是可以在不同的超链接上显示不同内容。
已包含jQuery。
（代码已有简化）
====js部分====(ps. 变量dere是希望出现的文字；变量mention是来表示<li>的顺序编号)
var dere = Array(); //文字们
dere[1]="aaaaa";
dere[2]="bbbbb";
dere[3]="ccccc";
var mention = 0;
$("#name").mouseover(function(){ //鼠标移至上方函数
mention = parseInt(document.getElementbyId("name").parentElement.id);//<a>的上级<li>的id赋值给mention
document.getElementById("describe").innerHTML = dere[mention];//写入文字
document.getElementById("describe").style.top = toString(parseInt(document.getElementById(document.getElementbyId("name").parentElement.id).style.top) - 40),"px";//确定位置，想要出现于指定<a>元素上方
$("div#describe").fadeToggle();//jQuery的淡入淡出
});
====CSS====
.describe{
display: none; //设定初始为不可见
}
====html结构====
<div id="describe" class="describe"></div> <!--这里是需要出现的div框-->
<li id="01"><a id="name"></a></li> <!--各个超链接-->
<li id="02"><a id="name"></a></li>
<li id="03"><a id="name"></a></li>
====Code End===
虽然按这样写了，不过仍然不能在各个浏览器中实现（鼠标移至<a>上方后无反应）
虽不知里面有没有语法错误或其他逻辑错误……
嘛、还是感谢大神对此解答。 展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<style type="text/css">
.describe {
display: none;
border: 1px solid black;
position: absolute;
background-color: #fd3;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (document).ready (function ()
{
var desc = $ ("#describe");
$ ("a").hover (function (e)
{
var x = e.clientX, y = e.clientY;
desc.css (
{
"left" : x + "px",
"top" : y + "px"
}).text ($ (this).text ()).fadeIn (30);
}, function ()
{
desc.hide ();
});
})
</script>
</head>
<body>
<div id="describe" class="describe"></div>
<!--这里是需要出现的div框-->
<li id="01"><a id="name">ssss</a></li>
<!--各个超链接-->
<li id="02"><a id="name">dsfdfsdf</a></li>
<li id="03"><a id="name">aaaaaaaaaadfd</a></li>
</body>
</html>
更多追问追答
追问
喔喔谢谢解答、的确出现了呢，不过能否更改div中的文字？
貌似出现的div中只是中的文字orz
追答
里面是文字，而这些文字是可以在不同的超链接上显示不同内容。
你的意思不是现实a里面的内容么？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
