如何在TR上的鼠标悬停/鼠标悬停时显示/隐藏div？
[英]How to show/hide a div from on mouseover/mouseout on a TR?
问题描述
Is it possible to attach a popup (div) dynamically to a row in a table such that the popup is rendered by a mouseover, and hidden by a mouseout action? 
是否可以将弹出窗口（div）动态地附加到表中的一行，以使该弹出窗口由鼠标悬停呈现，并由mouseout操作隐藏？
The code I put together ( see below ) refuses to render the popups, albeit the event handlers are called. 尽管调用了事件处理程序，但我放在一起的代码（请参见下文）拒绝呈现弹出窗口。
Is what I'm trying to do really possible? 我尝试做的事情真的有可能吗？ From [ mouseover() mouseout() jQuery add/removeClass problem , I'm guessing the problem is probably with the CSS 从[ mouseover（）mouseout（）jQuery add / removeClass问题 ，我猜测问题可能出在CSS上
Thought's people? 有思想的人吗？
EDIT: The class attached to the selected div elements is updated as expected for both, mouseover and mouseout. 编辑：附加到选定的div元素的类将按预期的方式进行更新，即mouseover和mouseout。
<link rel="stylesheet" type="text/css" href='mine.css' />
<html>
<head>
</head>
<body onload="doStuff();">
<table id="myTable">
<tr id="r1">
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr id="r2">
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
<tr id="r3">
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function doStuff(){
var lRowCount = document.getElementById("myTable").rows.length;
for(lIter = 0; lIter < lRowCount; lIter += 1){
var lDynamicColumn = document.createElement("td");
var lmyDiv = document.createElement( "div" );
var lId = document.getElementById("myTable").rows[lIter].id;
// div content to be displayed as Text content;
var lText = document.createTextNode( "balderdash!" );
lmyDiv.id= lId + "_popup";
lmyDiv.style.display="none" ;
lmyDiv.appendChild( lText );
/*lDynamicColumn.appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/
document.getElementById("myTable").rows[lIter].appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
document.getElementById("myTable").rows[lIter].onmouseout = function(){
hidePopup( lmyDiv.id );
};
}
alert(document.getElementById("myTable").innerHTML);
}
function showPopup( myId ){
document.getElementById(myId).className="show";
}
function hidePopup( myId ){
document.getElementById(myId).className="hide";
}
</script>
</html>
mine.css mine.css
.show{
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid rgb(200, 128, 0);
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
}
.hide{
z-index: -1;
}
6 个解决方案
解决方案1
2 2009-10-12 12:27:39
Add display: block to .show style. 将display: block添加到.show样式。 Also, your css selectors in the example are wrong, replace show with .show and hide with .hide (if that's not a typo). 此外，在本例中的CSS选择是错误的，更换show与.show和hide与.hide （如果这不是一个错字）。
解决方案2
0 2009-10-12 10:48:30
I am not sure if this is the problem, but it could be that the lmyDiv is not accessible inside the inline function. 我不确定这是否是问题，但可能是内联函数内部无法访问lmyDiv 。
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
EDIT: I tested it, and setting the style class dynamically like this did not work in Firefox , IE , Chrome or Safari . 编辑：我测试了它，并且像这样动态设置样式类在Firefox ， IE ， Chrome或Safari中不起作用。 But it did actually work in Opera ! 但这确实在Opera中起作用了！
EDIT 2: 编辑2：
I was thinking about something else that could be the issue here: 我在想可能是这里的问题的其他事情：
When the tooltip is shown, is it positioned so that the mouse is inside the tooltip area? 显示工具提示时，它的位置是否使鼠标位于工具提示区域内？ In that case, it might be that the onmouseout event on the row is triggered, because the row in question does not longer have "direct contact" with the mouse... 在这种情况下，可能是因为该行不再与鼠标“直接接触”，从而触发了该行的onmouseout事件。
If this is the case, you should add: 在这种情况下，您应该添加：
lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover;
lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;
解决方案3
0 2009-10-12 11:06:51
On mouse over try document.getElementById('yourcontrolID').style['display']='none'; 鼠标悬停时尝试document.getElementById（'yourcontrolID'）。style ['display'] ='none';
Hope this works. 希望这行得通。
解决方案4
0 2009-10-12 12:58:52
function hide(obj) { document.getElementById(obj.id).style.display ='none'; 函数hide（obj）{document.getElementById（obj.id）.style.display ='none'; } }
onMouseover='hide(this) call this function on div u want to hide. onMouseover ='hide（this）在要隐藏的div上调用此函数。
解决方案5
0 2009-10-12 13:12:46
If you are willing to risk browser incompatibility (and I mean some fairly older browsers we would all like to forget yet always show up when they shouldn't), you should consider simply dropping the javascript all together and simply use pseudo-classes, like so: 如果您愿意冒浏览器不兼容的风险（并且我是说一些我们都希望忘记的相当老的浏览器却总是在不应该出现的时候出现），则应考虑将所有javascript放在一起并使用伪类，例如所以：
.trMessage {
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid #c88000;
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
display: none;
}
.trMessage:hover {
display: block;
}
Now you have the option of adding the div to each row in the actual html or keeping the javascript that adds the message box, but without the need for event handlers to adjust for style or class switching. 现在，您可以选择将div添加到实际html的每一行中，或保留添加消息框的javascript，而无需事件处理程序针对样式或类切换进行调整。 You simply create the boxes the way you already do but use the class "messageBox" for each one. 您只需按照已经创建的方式创建盒子，但是对每个盒子都使用“ messageBox”类。 Then the css takes it from there. 然后CSS从那里拿走它。
解决方案6
-1 2009-10-12 10:33:15
尝试一下jQuery ！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.