![](/img/trans.png)
[英]Hover on element in one Div that changes the background image of another Div CSS
[英]toggle div on hover of one element, and off another?
当我将鼠标悬停在“标题”跨度上时,我试图实现的是显示“菜单”跨度,但是当我离开“标题”时才消失。
<header>
<span id="title">
title etc
</span>
<span id="menu">
menu content etc
</span>
</header>
我写了这个jquery代码,它起作用了,只是当我离开“ title”范围而不是“ header”时,“ menu”范围消失了
$('#title').hover({
$('#menu').toggle();
});
知道我该如何解决吗?
实现此目的的一种方法是稍微重新组织菜单,在实际场景中,定位可以照顾菜单的外观。
<header>
<span id="title">
title etc
<span id="menu">
menu content etc
</span>
</span>
</header>
这是一个更复杂的例子。
<span class="title">
title
<span class="menu">
<span class="item">menu11</span>
<span class="item">menu12</span>
<span class="item">menu13</span>
</span>
</span> <span class="title">
title2
<span class="menu">
<span class="item">menu21</span>
<span class="item">menu22</span>
<span class="item">menu23</span>
</span>
</span>
对于上述结构,只需使用CSS:
.menu {
display:none;
position:absolute;
top:10px;
left:0;
}
.title {
position:relative;
}
.title:hover .menu{
display:block;
}
怎么样:
$('#title').mouseenter(function(){
$('#menu').show();
});
$('header').mouseleave(function(){
$('#menu').hide();
});
这是一个jsfiddle: http : //jsfiddle.net/5sL5g/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.