CODEWITHSUNDEEP
jquerycsshover
Rodney
Rodney

Reputation: 624

How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

I have a CSS dropdown menu using a jQuery mouse over delay to prevent the menu from showing if a user is just moving the mouse to another link on the page.

My problem is that the css hover is firing that changes the style of the active li on mouse over.

Is there a way to prevent the CSS hover style from firing unless the hover time is reached as defined in jQuery routine? (user is purposely using menu)

I tried to use CSS animation: and animation-delay: but couldn't get that to work properly thus the reason why I'm using the jQuery routine.

CODE EXAMPLE IS HERE: http://jsfiddle.net/2fc3W/7/

My 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;
}

My 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' );
});

My 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>

Thanks for any advice in guiding me in the right direction.

Upvotes: 0

Views: 557

Answers (1)

darshanags
darshanags

Reputation: 2519

Try adding your active class to your css like:

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;
}

Fiddle here

Upvotes: 2

Related Questions