javascript 悬停时jquery浮动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18783117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery floating div on hover
提问by No1Lives4Ever
What I have?
我有的？
A html-table which has a lot of rows.
A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.
一个有很多行的 html 表。
一个隐藏的 (display=none) div，其中包含一些输入控件（我们称之为“div-to-display”）。整个页面只有一个 div-to-display。
What I'm trying to do?
我想做什么？
When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).
当鼠标悬停在每行的第一个单元格上时 - 在其下方显示“div-to-display”（如工具提示）。
But, I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.
但是，我无法为每个表格行创建一个单独的 div-to-display div。所有单元格必须使用相同的“div-to-display”元素。
While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.
在显示 div-to-display div 时，它应该是浮动的。这意味着它不会改变表格中其他单元格的位置。它将在他们之上。
Do you have idea how to do this with jquery`javascript`?
你知道如何用jquery`javascript`来做到这一点吗？
回答by gvee
DEMO:http://jsfiddle.net/sBtxq/
演示：http : //jsfiddle.net/sBtxq/
JQuery
查询
// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');
CSS
CSS
.div-to-display {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
}
td {
position: relative;
}
td:hover > .div-to-display {
display: block
}
Updated (non-JS) version
更新（非 JS）版本
CSS
CSS
td {
position: relative;
}
td:after {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
background-color: #eee;
z-index: 10;
content: "yay";
}
td:hover:after {
display: block
}
回答by Ganesh Pandhere
回答by Shadow
Style it on your own
自己设计风格
#div-to-display{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
z-index:99999;
display:none;
}
add this class="toHover"to each or table rows whom on hover you want to show div
将此添加class="toHover"到要在悬停时显示 div 的每个或表行
add this function
添加这个功能
window.onload = function(){
$('.toHover').each(function() {
$(this).mouseenter(function(){ $('#div-to-display').show(); });
$(this).mouseleave(function() { $('#div-to-display').hide();});
});
}
回答by Sanjeevi Rajagopalan
If you want a simple solution try using tooltip plugins. There will be loads available out there. One such is jquery UI tooltip plugin.
如果您想要一个简单的解决方案，请尝试使用工具提示插件。那里将有可用的负载。其中之一是 jquery UI工具提示插件。
回答by sangram parmar
Html For i.e.
Html 为 ie
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</table>
<div id="divInput" style="display:none;position:absolute;">
<input type="type" name="name" value=" " />
</div>
jQuery:
jQuery：
<script type="text/javascript">
var s = 'ss';
$('table tr').each(function () {
var this_tr = $(this);
this_tr.find('td:first').mouseenter(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').show();
}).mouseout(function () {
var this_td = $(this);
$('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
$('#divInput').hide();
})
})
</script>
