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'クラスにカーソルを合わせると部門が表示されるため、表示と非表示を切り替える 2 つのボックスがあります。これは次のコードです。

<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 に答える