我有以下 HTML 和 Javascript。我只想仅当鼠标悬停在链接上时一次显示隐藏的一个。如果鼠标位于链接“Drink”上，则仅显示该链接下方的隐藏 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>
谁能帮我解决这个问题吗？谢谢。
最佳答案
除了你想要实现的目标之外，还有其他选择。您可以使用其他方法来获得相同的结果，而不是坚持使用此方法。
请参阅下面的示例，该示例最初来自 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>
总有一个替代方案。希望这有帮助。
关于jquery - 将鼠标悬停在链接上时显示相邻的隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3124719/