javascript 如何在鼠标悬停在另一个标签上时切换 div 的可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15084416/
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 toggle visibility of div on mouseover of another a tag
提问by Hunain
I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
我会尽量简单，当有人将鼠标悬停在 a 标签上时，我试图在 div 上实现简单的可见性切换，类似于此链接上的四个按钮：
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
现在的问题是我希望它出现或希望它在鼠标悬停在标签上时可见，但是当我隐藏 div 时它永远不会回来，我尝试了多种方法，有些是
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
另一个是：
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
并且
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});
回答by Derek
You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter
mouseenter event will be fired only when you entering the element but not move within element.
您应该使用 mouseenter 而不是 mouseover。这是因为当您在元素内移动时会触发鼠标悬停事件。转到此处并滚动到底部以检查 mouseover 和 mouseenter 之间的区别。http://api.jquery.com/mouseenter
mouseenter 事件只会在您输入元素但不在元素内移动时触发。
This is the solution you want. It is almost similar to the site you provided.
JavaScript
这就是您想要的解决方案。它与您提供的站点几乎相似。
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
风格
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/
jsFiddle 示例http://jsfiddle.net/TAZmt/1/
回答by Bhadra
$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
和 html 是
<a href="#" id="link">LINK</a>
<div id="DIV" style="display:none">Your content in it</div>
回答by Olaf Dietsche
You don't need Javascript here. This is possible with CSS alone
你在这里不需要 Javascript。这可以单独使用 CSS
HTML:
HTML：
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
CSS：
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddlefor playing.
和JSFiddle用于播放。
回答by Faizul Hasan
I got it, slight changes in selectors
我明白了，选择器略有变化
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});
回答by Stefan Konno
This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenterevent, this class then makes the hidden <ul>in the div show up due to.
这应该做。检查jsfiddle。这里的基本思想是在mouseenter事件的根 div 中添加一个类（.shown），然后这个类使隐藏<ul>在 div 中的部分显示出来。
.shown ul{
display: block !important;
}
EDIT:
编辑：
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
进行了一些小的 css 更改，以更好地反映您正在寻找的行为，但您必须更改 css 以基本上适应您自己的代码。我希望这有帮助。
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});
回答by emjay
i hope this is the solution you're seaching for.
我希望这是您正在寻找的解决方案。
Just place the following code below your <body>tag:
只需将以下代码放在您的<body>标签下方：
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
这是一个链接和切换的 div：
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>
