0

ユーザーがページ上の別のリンクにマウスを移動しているだけの場合にメニューが表示されないように、jQueryマウスオーバー遅延を使用するCSSドロップダウンメニューがあります。

私の問題は、マウスオーバーでアクティブなliのスタイルを変更するcssホバーが起動していることです。

jQueryルーチンで定義されているホバー時間に達しない限り、CSSホバースタイルが起動しないようにする方法はありますか？（ユーザーは意図的にメニューを使用しています）

CSSアニメーション：とanimation-delay：を使用しようとしましたが、正しく機能させることができなかったため、jQueryルーチンを使用している理由です。

コード例はここにあります：http：//jsfiddle.net/2fc3W/7/

私のCSS：

.pipe {
    margin-top:4px;
}
.li_hover {
    color: #002398;
}
.bottom_li {
    margin-bottom:6px;
    margin-top:2px;
}
ul#nav li .bottom_li:hover > a {
    background:#E0E0E0;
}
ul#nav, ul#nav ul {
    width:300px;
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:9;
    border:1px solid #297BCE;
}
ul#nav li li:hover > a {
    border:none;
}
ul#nav li {
    position:relative;
    float:left;
    zoom:1;
    /*Needed for IE*/
}
ul#nav li:hover > a {
    background:#E0E0E0;
    color:#297BCE;
    border-left:1px solid #297BCE;
    border-right:1px solid #297BCE;
    border-top:1px solid #E0E0E0;
    border-bottom:1px solid #E0E0E0;
    text-decoration:underline;
}

#nav li.is-active > ul {
     display: block;   
}
ul#nav li a {
    border:1px solid #FFFFFF;
    display:block;
    padding:4px 6px 4px 6px;
    color:#297BCE;
    font-weight:bold;
    font-family:Arial, Times New Roman, Tahoma;
    font-size:13px;
    text-decoration:none;
}
ul#nav ul {
    padding-left:8px;
    padding-top:2px;
    display:none;
    position:absolute;
    width:150px;
    border:1px solid #297BCE;
    background:#E0E0E0;
    left:0;
    border-top:none;
}
ul#nav ul li {
    background:#E0E0E0;
    color:#000;
    border:none;
    float:none;
}
ul#nav ul li a {
    border:none;
    width:100%;
    padding:0;
    display:block;
    color:#000000;
    line-height:145%;
    font-size:12px;
    font-weight:normal;
}
ul#nav ul li a:hover {
    border:none;
    width:150px;
    color:#297BCE;
}
ul#nav ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left:-3px;
    display: none;
}
ul#nav ul ul {
    padding-left:8px;
    position:absolute;
    width:150px;
    border:1px solid #297BCE;
    background:#E0E0E0;
}
ul#nav ul li:hover ul {
    display: block;
}
ul#nav ul.snug{
    width: auto;
}
ul#nav ul.snug li a{
    display: inline;
    padding-right: 6px;
    width: auto;
}

私のJavascript：

var hoverTimer = function ( menu ) {
    return setTimeout(function() {
        $(menu).addClass('is-active');
    }, 500);
},
    hover = null,
    $nav = $( '#nav > li' );

$nav.mouseenter(function() {
   hover = hoverTimer(this);
});

$nav.mouseleave(function() {
   clearTimeout(hover); 
   $nav.removeClass( 'is-active' );
});

私のHTML：

<div id="menubar">
<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
</ul>
</div>

私を正しい方向に導くためのアドバイスをありがとう。

4

1 に答える 1

2

次のように、アクティブなクラスをcssに追加してみてください。

ul#nav li.is-active:hover > a {
    background:#E0E0E0;
    color:#297BCE;
    border-left:1px solid #297BCE;
    border-right:1px solid #297BCE;
    border-top:1px solid #E0E0E0;
    border-bottom:1px solid #E0E0E0;
    text-decoration:underline;
}

#nav li.is-active > ul {
     display: block;   
}

ul#nav ul li.is-active a:hover {
    border:none;
    width:150px;
    color:#297BCE;
}

ul#nav ul li.is-active:hover ul {
    display: block;
}

ここでフィドル

于 2013-03-09T17:47:54.103 に答える