0

順序付けられていないリストに含まれるアイテムがあります。このリストの外に (display:none; を使用して) div を隠しています。リスト項目にカーソルを合わせると、div が表示されます。マウスをリスト項目からその下の div に移動した場合も、表示されたままにする必要があります。

私は、CSS、JavaScript/jQuery を通じてこれを達成することにオープンです。また、ドキュメントは HTML5 に設定されています。

これは私が現在取り組んでいるものです。

<nav id="main-menu">
        <ul>
            <li><a class="first-link parent" href="">First Link</a></li>
            <li><a class="second-link parent" href="">Second Link</a></li>
            <li><a class="third-link parent" href="">Third Link</a></li>
            <li><a class="fourth-link parent" href="">Fourth Link</a></li>
        </ul>
    </nav><!-- #main-menu !-->

ナビゲーションの下には、対応するアイテムの上にカーソルを置いたときに表示したいコンテンツがあります。 

        <div id="first-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .first-widget !-->


<div id="second-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .second-widget !-->

<div id="third-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .third-widget !-->



<div id="fourth-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .fourth-widget !-->

    </aside><!-- .hidden !-->

これには簡単な解決策があるはずだと思いますが、これまでの試みは不十分でした。最大の問題は、メニュー項目をホバリングしたときだけでなく、メニューから表示されている div に移動したときにも div が表示されることです。

ここまでお読みいただきありがとうございました。

4

2 に答える 2

4

ウィジェットをラップして、それにイベントをdiv添付できます。mouseleaveこのソリューションではrel attibute、ウィジェットの保存にも を使用していますid: DEMO

HTML

<div id="wrap">
    <nav id="main-menu">
        <ul>
            <li><a class="first-link parent" rel="first-widget" href="">First Link</a></li>
            <li><a class="second-link parent" rel="second-widget" href="">Second Link</a></li>
            <li><a class="third-link parent" rel="third-widget" href="">Third Link</a></li>
            <li><a class="fourth-link parent" rel="fourth-widget" href="">Fourth Link</a></li>
        </ul>
    </nav><!-- #main-menu !-->

    <div id="first-widget" class="widget-container">
                <h2>Sub Title 1</h2>              
                <p>Lorem Ipsum
                <a href="#">Read More</a></p>
     </div><!-- .first-widget !-->
      ...
</div>

JS

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.show().siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
    $('.widget-container').hide();
});
于 2012-02-12T00:55:57.317 に答える
2

このようなものがうまくいくはずです。

イベントを.hoverバインドし、表示/非表示にするイベント.indexと.eqネイティブ JS メソッドをタイムアウトに使用して、div をホバーできるようにするために使用します。

var timeout; // store a timeout here

$('#main-menu lia ').hover(function ()
{
    $('.widget-container').eq($(this).parent().index()).show();
}, function ()
{
    timeout = setTimeout(function ()
    {
        $('.widget-container').eq($(this).parent().index()).hide();
    }, 1000);
);

$('.widget-container').hover(function ()
{
    clearTimeout(timeout);
}, function ()
{
    timeout = setTimeout(function ()
    {
        $(this).hide();
    }, 1000);
});
于 2012-02-12T00:06:04.590 に答える