我有以下HTML和Javascript。我只想在鼠标悬停链接时一次显示隐藏的一个。如果鼠标位于链接“饮料”上，则仅显示该链接下方的隐藏div，其他隐藏的div必须保持隐藏状态。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Untitled Document
</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
// timer for hiding the div
var hideTimer;
// show the DIV on mouse over
$(".show_div").mouseover(function() {
// forget any hiding events in timer
clearTimeout( hideTimer );
$(".hello").css('visibility', 'visible');
});
$(".hello").mouseover(function() {
clearTimeout( hideTimer );
$(".hello").css('visibility', 'visible');
});
// set a timer to hide the DIV
$(".show_div").mouseout(function() {
hideTimer = setTimeout( hideHello, 333 );
});
$(".hello").mouseout(function() {
hideTimer = setTimeout( hideHello, 333 );
});
// hides the DIV
function hideHello() {
$(".hello").css('visibility', 'hidden');
}
});
</script>
</head>
<body>
<br/>
<table border="1" width="400">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td><a class="show_div" href="#">Drink</a>
<div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
<ul>
<li>
Coffee
</li>
<li>
Tea
</li>
<li>
Milk
</li>
</ul>
</div>
</td>
<td><a class="show_div" href="#">Friuts</a>
<div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
<ul>
<li>
Banana
</li>
<li>
Water Melon
</li>
<li>
Lychee
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a class="show_div" href="#">Movies</a>
<div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
<ul>
<li>
Avatar
</li>
<li>
Star War
</li>
<li>
Titanic
</li>
</ul>
</div>
</td>
<td><a class="show_div" href="#">Books</a>
<div class="hello" style="visibility:hidden;z-index:999;position: absolute;background-color:#99CC67;">
<ul>
<li>
Novel
</li>
<li>
History
</li>
<li>
Design
</li>
</ul>
</div>
</td>
</tr>
</table>
<br/>
</body>
</html>
任何人都可以帮我解决这个问题吗？谢谢。
答案 0 :(得分：2)
您可以选择实现的目标。您可以使用其他方法获得相同的结果，而不是坚持使用此方法。
请参阅下面的示例，该示例最初来自scottonwriting，但我让示例看起来与您的相似。这是使用scottonwriting
中建议的工具提示的示例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Untitled Document
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<style type="text/css">
.skmTooltipHost { border-bottom: dotted 1px brown; } .skmTooltipContainer
{ padding-left: 20px; padding-right: 10px; padding-top: 3px; padding-bottom:
3px; display: none; position: absolute; background-color: #ff9; border:
solid 1px #333; width :300px; z-index: 999; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".skmTooltipHost").hover(
function() {
$(this).append('<div class="skmTooltipContainer">' + $(this).attr('tooltip') + '</div>');
$(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20);
$(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height());
$(".skmTooltipContainer").fadeIn(10);
},
function() {
$(".skmTooltipContainer").fadeTo(10, 0.1, function() {
$(this).remove();
});
});
});
</script>
</head>
<body>
<br/>
<table border="1" width="400">
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<tr>
<td>
<p>
<span tooltip="Choose your drink:<div><ul><li>Coffe</li><li>Tea</li><li><a target=_blank href=http://www.w3schools.com>Visit W3Schools.com!</a></li></ul></div>"
class="skmTooltipHost">
Drinks
</span>
</p>
</td>
<td>
<p>
<span tooltip="Choose your fruit:<div><ul><li>Orange</li><li>Banana</li><li><a target=_blank href=http://www.w3schools.com>Visit W3Schools.com!</a></li></ul></div>"
class="skmTooltipHost">
Fruit
</span>
</p>
</a>
</td>
</tr>
<tr>
<td>
<p>
<span tooltip="Choose your movie:<div><ul><li>Avatar</li><li>Titanic</li><li><a target=_blank href=http://www.w3schools.com>Visit W3Schools.com!</a></li></ul></div>"
class="skmTooltipHost">
Movie
</span>
</p>
</a>
</td>
<td>
<p>
<span tooltip="Choose your book:<div><ul><li>History</li><li>Novel</li><li><a target=_blank href=http://www.w3schools.com>Visit W3Schools.com!</a></li></ul></div>"
class="skmTooltipHost">
Drink
</span>
</p>
</td>
</tr>
</table>
<br/>
<br/>
</body>
</html>
总有另一种选择。希望这有帮助。
答案 1 :(得分：1)
如果您的标记最终发生变化，您可能需要试用siblings()函数。
编辑 - 针对鼠标悬停进行了更新（更好地了解了您正在做的事情）。请记住，你应该使用display：none而不是visibility：hidden，这样你就可以通过hide / show，fadeIn，fadeOut，slideDown，slideUp等函数更轻松地控制它的可见性。
再次编辑：我终于明白了你的想法。当您将鼠标悬停在IT上时，您不希望div出现（就像下拉菜单一样）。这里修改了代码。
注意，这使用jQuery的hoverIntent插件。
$(document).ready(function() {
$("a.show_div").hoverIntent({ // capture the link hover events
over: function() {
var $sibling = $(this).siblings('div.hello').show(); // get the sibling div and show it
$('div.hello').not($sibling).hide(); // hide the other divs
$sibling.data('linkOver', true); // store the fact that the link triggered this
},
out: function() {
var $sibling = $(this).siblings('div.hello');
$sibling.data('linkOver', false);
if( $sibling.data('divOver') != true) { // only hide if the mouse isn't on the div
$sibling.delay(200).fadeOut(500); // get the sibling div and hide it after .333 seconds
}
},
timeout: 500 //time to fire the event - must be greater than div.hover's timeout
});
$("div.hello").hoverIntent({ //capture the div hover events
over: function() {
$(this).data('divOver', true); // store the fact we're over the div now
},
out: function() {
var $div = $(this);
$div.data('divOver', false);
if( $div.data('linkOver') != true ) { // if we're not on the link
$(this).delay(200).fadeOut(500); // then hide the div
}
},
timeout: 400
});
});
这背后的想法是我们需要跟踪的其他项目之一。如果我们要在链接中隐藏div，我们需要确保我们目前不在div上。 div也是如此，确保我们不在链接上。
您可以在此处尝试：http://jsfiddle.net/Y2pLR/
我还更新了您的pastebin条目。
答案 2 :(得分：0)
尝试：
$('a.show_div').mouseover(function(){
$('div.hello').css('visibility', 'hidden'); // hide all
$(this).next('div.hello').css('visibility', 'visible'); // show this one
});
另外，如果要在鼠标进入/离开时显示/隐藏内容，请考虑使用hover方法。
答案 3 :(得分：0)
试试这个：
$(document).ready(function(){
$('.show_div').mouseover(function(){
$(this).next('.hello').show();
})
$('.show_div').mouseout(function(){
$(this).next('.hello').hide();
})
})
您还可以添加一些计时器以自动隐藏。 希望这能给你一些启发。