1

メニューの2番目のボタンにカーソルを合わせると、「サブメニュー」が表示されます。表示されると、div「コンテナ」内の画像を部分的にカバーします。

サブメニューのスタイルは半透明であるため、div "container"内の画像もメニューの背景に表示されますが、見栄えがよくありません。

簡単な解決策はdivの場所を変更することですが、画像が中央に配置されないため、オプションではありません。サブメニューのあるボタンにカーソルを合わせると、マウスをメニューから離すと、divの「コンテナ」が非表示になって再び表示される可能性があるのではないかと思いました。divの「コンテナ」にはサブメニューがないため、最初のホームボタンにカーソルを合わせたときに非表示にしないでください。メニューが開いている限り、画像は非表示のままにする必要があります。javascriptまたはjQueryまたはCSS3で可能ですか？

HTMLコード：

<div id="menu">
            <ul class="menu" id="tempMenu">
                <li class="Home"><a href="www.google.com">Home</a></li>
                <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">One</a>
                            </li></br>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
  </ul>
        </div>

<div id="container">

          <div id="box1" class="box">Image1<img src="images/image1.png"></div>
          <div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>

CSSコード：

ul.menu .submenu{
    display: none;
   position: absolute;
}

ul.menu li:hover .submenu{
    display: block;
}
4

4 に答える 4

3 
$('.submenu').hover(function() {
    $('#container').hide()
}, function() {
    $('#container').show()
});
于 2012-12-29T16:12:12.513 に答える
2

.menu > a基本的に、現在のメニュー項目（要素の1つ）にサブメニュー（）が含まれている場合は常に、ホバーイベントで検出する必要があります.submenu。

どうですか：

$('.menu > a').hover(function(){
    if ($(this).find('.submenu').length != 0) {
        $('#container').hide();
    }
}, function(){
    $('#container').show();
});

また、一部のhtml終了タグには問題があります。予期しない不具合を防ぐために、すべてが正しい順序で終了していることを確認する必要があります。

于 2012-12-29T16:59:14.247 に答える
1

まず、そのdiv2に次のようなクラス名を付けます-class1、class2

Cssで：

        .class1{
            display: none;
            position: absolute;
               }
         .class2{
            display : block;
                }

jqueryで：

         //this would track mouse pointer in/out events
         $("#menu").hover( function(event){ $("#div").attr("class","class1"); }, 
                           function(event){ $("#div").attr("class","class1"); } );
于 2012-12-29T16:11:03.197 に答える
1

これを閉じるのを忘れました

  • <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>

    に

    <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>

    Jqueryの場合、これは役立つと思います

    $('.submenu').mouseenter(function() {
    $('#container').hide()
}).mouseleave(function(){
    $('#container').show()
});
    • 于 2012-12-29T16:48:12.670 に答える