0

ここでソリューションを組み合わせて使用​​しています。各リンクのホバー時に背景色を適用しています。ホバー時に表示される対応する div にホバーしながら、各リンクの背景色を維持したいと思います。getValue 変数と appliHover 変数を除くすべて。何が欠けているのかわからない。ここに私が取り組んでいるコードがあります:

<style type="text/css">
<!--
ul.main-nav-list li { display: inline; }
ul.main-nav-list a { background: #red; }
ul.main-nav-list a.hover, ul.main-nav-list a:hover { background: #ccc }
div.mega-container { display: none; width: 600px; background: #ccc; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>$(document).ready(function () {

       var timeout
       var counter = 1
       var widgetCounter = 1

        $('ul.main-nav-list a').each(function(){
            $(this).attr('rel', 'mega-menu');
            this.rel+= counter++
        });

        $('div.mega-container').each(function(){
            $(this).attr('id', 'mega-menu');
            this.id+= widgetCounter++
        });

        $('ul.main-nav-list a.mega-list').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide().eq($(this).parent().index()).show();
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
            }, 1000);
        });

        $('div.mega-container').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide();
            $(this).show();
            var getValue = $(this).attr('rel');
            var $appliHover = $('ul.main-nav-list a[class=' + getValue + ']');
        alert($appliHover);
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
            }, 1000);
        });



    });
</script>
</head>

<body>

<div id="main-nav">
 <ul class="main-nav-list">
  <li><a class="mega-list" href="mysite/index.html">Mega Nav 1</a></li>
  <li><a class="mega-list" href="mysite/index.html">Mega Nav 2</a></li>
  <li><a href="mysite/index.html">Mega Nav 3</a></li>
  <li><a href="mysite/index.html">Mega Nav 4</a></li>
  <li><a href="mysite/index.html">Mega Nav 5</a></li>
 </ul>
</div>

<div class="mega-container">
 <h1>Mega Container 1</h1>
 <ul>
<li><a href="mysite/index.html">Mega Container Nav</a></li>
<li><a href="mysite/index.html">Mega Container Nav</a></li>
 </ul>
</div>

<div class="mega-container">
 <h1>Mega Container 2</h1>
 <ul>
<li><a href="mysite/index.html">Mega Container Nav</a></li>
<li><a href="mysite/index.html">Mega Container Nav</a></li>
 </ul>
</div>

</body>
4

1 に答える 1

0

私はこれを理解することができました。これは、ここでアルパカの唇とジョーによって提供されたソリューションの組み合わせでした. 他の誰かがこれを使用できる場合の変更は次のとおりです。

<script>$(document).ready(function () {

       var timeout
       var counter = 1
       var widgetCounter = 1

        $('ul.main-nav-list a').each(function(){
            $(this).attr('rel', 'mega-menu');
            this.rel+= counter++
        });

        $('div.mega-container').each(function(){
            $(this).attr('id', 'mega-menu');
            this.id+= widgetCounter++
        });

        $('ul.main-nav-list a.mega-list').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide().eq($(this).parent().index()).show();
            if(!$(this).hasClass('hover')){
                $(this).addClass('hover');
            }
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
            }, 1000);
        });

        $('div.mega-container').hover(function(){
            clearTimeout(timeout);
            $('.mega-container').hide();
            $(this).show();
            },
            function(){
            timeout = setTimeout(function(){
                $('.mega-container').hide();
                $('ul.main-nav-list a.mega-list').removeClass('hover');
            }, 1000);
        });
    });
</script>
于 2012-10-21T20:55:07.623 に答える