Question

我正在尝试创建一个导航栏，下面是我的代码： 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布局，请继续。

这是此http://jsfiddle.net/ndevJ/

的小提琴链接

Answer 1

是否有必要将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;}

用jquery创建导航栏

1 个答案: