0

画面外に隠れているシンプルなサイド メニューがあり、特定の領域にホバーしたときにそれを表示したいと考えています。うまくいきますが、マウスがメニューの上に来ると、領域外と判断して戻ってしまいます。次に、これが発生すると、私が望む相互作用の反対を行います:

<div class="menu-hover">
  Hover Mouse Here
</div>
<div class="side-menu">
  <div class="btn-group btn-group-vertical">
    <button id="metro" class="btn">Metro</button>
    <button id="list" class="btn">List</button>
    <button id="grid" class="btn">Grid</button>
  </div>
</div>

CSS:

.side-menu {
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 700;
    left: -96px;
    padding: 15px;
    text-decoration: none;
    top: 0;
    height: 100%;
    position: fixed;
    z-index: 5;
    cursor: pointer;
}

JS:

$(".menu-hover").hover(
  function () {
    var $lefty = $(".side-menu");
    $lefty.animate({
        left: parseInt($lefty.css('left')) < -95 ?
        $lefty.css('left') == 0 :
        -96
    });
  });
4

2 に答える 2

1

作業コードは次のようになります

    $(".menu-hover").on({
    'mouseenter': function (e) {
        e.stopPropagation();
                    var $lefty = $(".side-menu");
                    $lefty.animate({
                     left: parseInt($lefty.css('left')) < -95 ?
                     $lefty.css('left') == 0 :
                        -96})
                   }
});
$('.menu-hover').on({
    'mouseleave': function(){
        var $lefty = $(".side-menu");
            $lefty.animate({
            left: -96
        })
    }
})

jsfiddle の例: http://jsfiddle.net/glenswift/7UQDM/1/

于 2013-03-22T14:05:18.030 に答える
0

これを試して：

動作デモはこちら

$(".menu-hover, .side-menu").mouseenter(function (){
    $(".side-menu").animate({
        left: 0
    })
});

$('.side-menu').mouseleave(function(){
    $(this).animate({
        left: -96
    })
});
于 2013-03-22T14:59:06.763 に答える