我对此有点挣扎,我可以整天隐藏/显示/淡化/淡化,但我试图让我的头脑围绕在我的目标元素和鼠标悬停时拉出其具体描述的逻辑,我有接近得到这个但感觉我错过了一些东西,下面是我的 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>
这是我的 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;
}
最后是 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();
});
});
最佳答案
当你在 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*/
})
关于javascript - Jquery 隐藏在鼠标悬停时显示特定的 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19823117/