如何使用 jquery 在鼠标悬停时显示/隐藏 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9564481/
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
How to show/hide a div on mouseover using jquery?
提问by saran
I have a table in this format.
我有一张这种格式的表格。
<table>
<tr>
<td id="divOne">div one</td>
<td id="divOne">2222</td>
</tr>
<tr>
<td id="divOne">div two</td>
<td id="divOne">2222</td>
</tr></div>
</table>
and a jquery function to show/hide a div on mouseover
以及在鼠标悬停时显示/隐藏 div 的 jquery 函数
$(function() {
$('#divOne').hover(function() {
$('#Details').show();
}, function() {
$('#Details').hide();
});
});
<div id = "Details" style="display: none;">
5555
</div>
I want to display the "details" div on a popup when i mouseover on each td.
The "Details" div appears when I mouse over the first row. But it is not shown when i mouseover on the second row.
I'm not sure where I go wrong.
Any ideas would be appreciated.
当我将鼠标悬停在每个 td 上时，我想在弹出窗口中显示“详细信息”div。
当我将鼠标悬停在第一行上时，会出现“详细信息”div。但是当我将鼠标悬停在第二行时它不会显示。
我不确定我哪里出错了。
任何想法，将不胜感激。
回答by Alex
There should only be one ID on the page. Change your ID's for classes and your selector for a class selector:
页面上应该只有一个 ID。更改您的类 ID 和类选择器的选择器：
<table>
<tr>
<td class="divOne">div one</td>
<td class="divOne">2222</td>
</tr>
<tr>
<td class="divOne">div two</td>
<td class="divOne">2222</td>
</tr>
</table>
And:
和：
$(function() {
$('.divOne').hover(function() {
$('#Details').show();
}, function() {
$('#Details').hide();
});
});
回答by sandeep
you cant give same id to multiple element
你不能给多个元素相同的 id
live codeis here http://jsfiddle.net/GSz5X/
实时代码在这里http://jsfiddle.net/GSz5X/
<table>
<tr>
<td class="divOne">div one</td>
<td class="divOne">2222</td>
</tr>
<tr>
<td class="divOne">div two</td>
<td class="divOne">2222</td>
</tr></div>
</table>
<div id = "Details" >
5555shdrhdrh
</div>
?
$(function() {
$('.divOne').hover(function() {
$('#Details').toggle();
});
});
?
回答by Nicola Peluchetti
First of all you have repeated ids on elements, which is wrong. use classes instead, ids should be unique
首先，您在元素上重复了 id，这是错误的。改用类，ID 应该是唯一的
<table>
<tr>
<td class="divOne">div one</td>
<td class="divOne">2222</td>
</tr>
<tr>
<td class="divOne">div two</td>
<td class="divOne">2222</td>
</tr>
</table>
then change your code
然后更改您的代码
$(function() {
$('.divOne').hover(function() {
$('#Details').show();
}, function() {
$('#Details').hide();
});
});
this will end up (with your actual markup) with the result that your div will be shown when you hover on the table and it will be hidden when you don't
这将最终（使用您的实际标记）结果是当您将鼠标悬停在桌子上时将显示您的 div，而当您不这样做时它将被隐藏
回答by mgraph
USE class instead of ID
使用类而不是 ID
$(function() {
$('.divOne').hover(function() {
$('#Details').show();
}, function() {
$('#Details').hide();
});
});
HTML:
HTML：
<td class="divOne">div one</td>
回答by Maxim Manco
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
id 属性为 HTML 元素指定唯一的 id（该值在 HTML 文档中必须是唯一的）。
<table id="divOne">
<tr>
<td>div one</td>
<td>2222</td>
</tr>
<tr>
<td>div two</td>
<td>2222</td>
</tr>
</table>
<div id="Details" style="display: none;">
5555
</div>
<script type="text/javascript">
$(function() {
$('#divOne td').hover(
function() { $('#Details').show(); },
function() { $('#Details').hide(); }
);
});
</script>
回答by Bjarne77
Change your id's to class identifiers. See example here: http://jsfiddle.net/A7f2p/
将您的 ID 更改为类标识符。请参阅此处的示例：http: //jsfiddle.net/A7f2p/
