0

我正在尝试创建一个导航栏，下面是我的代码： html: This is Navigation baar

<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/的小提琴链接

4

1 回答 1

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;}
于 2013-05-23T04:54:56.820 回答