javascript Jquery隐藏在鼠标悬停时显示特定的div元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19823117/
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 hide show specific div element on mouseover
提问by dyatesupnorth
I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:
我在这方面有点挣扎，我可以整天隐藏/显示/淡入淡出/淡出，但我试图理解在我的元素中定位元素并在鼠标悬停时提取其特定描述的逻辑，我已经接近得到这个但感觉我错过了一些东西，下面是我的 HTML：
<ul id="menu" class="menu">
<li><a href="">Home</a></li>
<li id="menu1" class="menu-link"><a href="/">LINK1</a></li>
<li id="menu2" class="menu-link"><a href="/">LINK2</a></li>
<li id="menu3" class="menu-link"><a href="/">LINK3</a></li>
<li id="menu4" class="menu-link"><a href="/">LINK4</a></li>
</ul>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
and here is my CSS, the idea is to position the description just above its corresponding
这是我的 CSS，想法是将描述定位在其对应的上方
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
and finally here is the jquery:
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
最后这里是jquery：
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});
回答by charlietfl
WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID
当 2 组元素之间存在一对一的关系并且它们在每组匹配中的顺序时，通常更容易使用索引而不是解析 ID
var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
/* "this" is element being hovered*/
var index= $links.index(this);
$content.stop().hide().eq(index).fadeIn();
},function(){
/* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})
回答by Chandranshu
I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:
我已经更新并简化了您的小提琴以使其工作：工作小提琴。这是没有任何JS的简化代码：
HTML:
HTML：
<ul id="menu" class="menu">
<li>
<a href="">Home</a>
</li>
<li id="menu1" class="menu-link">
<a href="/">LINK1</a>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
<a href="/">LINK2</a>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
<a href="/">LINK3</a>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
<a href="/">LINK4</a>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
CSS：
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}
Let me know if you need any explanations and I'll edit my answer.
如果您需要任何解释，请告诉我，我会编辑我的答案。
