我正在尝试创建一个导航栏,下面是我的代码: HTML: 这是导航栏
<div class="cat-set">
<div class="icon-wrap">
<div class="icons active" id="mobiles"><div class="bgimg mobiles"></div></div>
<div class="icons" id="laptops"><div class="bgimg laptops"></div></div>
</div>
</div>
在每个'.icons'
类的悬停时,将显示一个分区,因此有两个框可以显示和隐藏,这是代码:
<div class="cat-demo" id="mobiles">
<p>This is for mobiles, if mouse is on .mobiles then this will be shown</p>
</div>
<div class="cat-demo" id="tablets">
<p>This is for tablets, if mouse is on .mobiles then this will be shown</p>
</div>
这是Jquery代码:
$('.icons').hover(function(){
$('.icons').each(function(){$(this).removeClass("active");});
$(this).addClass("active");
var position = $(this).position();
$('.cat-demo').css({'left':(position.left-4)+'px'});
var showThis=$(this).attr("id")
$(".cat-demo:visible").hide()
$("'#"+showThis+".cat-demo'").show();
});
所以直到这里一切正常,但问题是我想要隐藏'.cat-demo'
如果鼠标指针超出'.icons'
并且指针位于.cat-demo
上,那么它不应该隐藏它。请帮帮我...如果你想改变html布局,请继续。
答案 0 :(得分:0)
是否有必要将js用于此类菜单? 如果您的菜单具有简单的行为,则仅使用CSS显示/隐藏菜单的子项。
例如:
<ul class="cat-set">
<li>
mobile
<p>
This is for mobiles, if mouse is on .mobiles then this will be shown
</p>
</li>
<li>
laptops
<p>
his is for tablets, if mouse is on .mobiles then this will be shown
</p>
</li>
</ul>
和CSS:
ul.cat-set > li {display: inline-block; margin: 10px;}
ul.cat-set > li p {display: none; position: absolute;}
ul.cat-set > li:hover p {display: block;}