用javascript 当mouseover一个td里的内容时显示一段文字
3个回答
展开全部
我用title 和div 两种方法做的, 文字出现的位置根据鼠标的位置动态确定:
<!-- 用title 属性比较方便, 但是不灵活 -->
<table border="1">
<tr>
<td title="鼠标停留显示内容1">文字内容1</td>
</tr>
</table>
<!-- 可以自己声明一个Div, 用来显示内容, 根据对鼠标位置的侦听, 动态改变Div 的位置 -->
<table border="1">
<tr>
<td onmouseover="overShow()" onmouseout="outHide()">文字内容2</td>
</tr>
</table>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<script>
function overShow() {
var showDiv = document.getElementById('showDiv');
showDiv.style.left = event.clientX;
showDiv.style.top = event.clientY;
showDiv.style.display = 'block';
showDiv.innerHTML = '鼠标停留显示内容2';
}
function outHide() {
var showDiv = document.getElementById('showDiv');
showDiv.style.display = 'none';
showDiv.innerHTML = '';
}
</script>
<!-- 用title 属性比较方便, 但是不灵活 -->
<table border="1">
<tr>
<td title="鼠标停留显示内容1">文字内容1</td>
</tr>
</table>
<!-- 可以自己声明一个Div, 用来显示内容, 根据对鼠标位置的侦听, 动态改变Div 的位置 -->
<table border="1">
<tr>
<td onmouseover="overShow()" onmouseout="outHide()">文字内容2</td>
</tr>
</table>
<div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
<script>
function overShow() {
var showDiv = document.getElementById('showDiv');
showDiv.style.left = event.clientX;
showDiv.style.top = event.clientY;
showDiv.style.display = 'block';
showDiv.innerHTML = '鼠标停留显示内容2';
}
function outHide() {
var showDiv = document.getElementById('showDiv');
showDiv.style.display = 'none';
showDiv.innerHTML = '';
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
function showTag(which)
{//如果只是需要一个简单的文字提示，在td里加上title="文字"即可
myTag.style.display="";
mousePos=getMousePos(event);
myTag.style.top=mousePos.y+20;
myTag.style.left=mousePos.x;
}
function getMousePos(e)
{
if (typeof(e.pageX)!="undefined")
return {x: e.pageX,y: e.pageY};
return {
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
y: e.clientY + document.body.scrollTop - document.body.clientTop
}
}
function hideTag(which)
{
myTag.style.display="none";
}
</script>
...
<table>
...
<td onmouseover="showTag(this)" onmouseout="hideTag(this)">...</td>
...
</table>
<div id="myTag" style="display:none;position:absolute;border-style:solid;background-color:#ffeedd;border-color:black;border-width:1">要显示的提示文字</div>
function showTag(which)
{//如果只是需要一个简单的文字提示，在td里加上title="文字"即可
myTag.style.display="";
mousePos=getMousePos(event);
myTag.style.top=mousePos.y+20;
myTag.style.left=mousePos.x;
}
function getMousePos(e)
{
if (typeof(e.pageX)!="undefined")
return {x: e.pageX,y: e.pageY};
return {
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
y: e.clientY + document.body.scrollTop - document.body.clientTop
}
}
function hideTag(which)
{
myTag.style.display="none";
}
</script>
...
<table>
...
<td onmouseover="showTag(this)" onmouseout="hideTag(this)">...</td>
...
</table>
<div id="myTag" style="display:none;position:absolute;border-style:solid;background-color:#ffeedd;border-color:black;border-width:1">要显示的提示文字</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function fun(){
var a=document.getElementById("content");
a.innerText="ddd";
}
</script>
<BODY>
<table border=1>
<tr>
<td>sss</td>
<td id="content" onmouseover="fun()">鼠标经过</td>
</tr>
</table>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function fun(){
var a=document.getElementById("content");
a.innerText="ddd";
}
</script>
<BODY>
<table border=1>
<tr>
<td>sss</td>
<td id="content" onmouseover="fun()">鼠标经过</td>
</tr>
</table>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
