jquery - Disabling hover event with the .not() method -

i have following code , can't figure out why hoverintent event firing although assign selected-food class li element on click.

here jsfiddle: http://jsfiddle.net/7upcc/2/

expected behaviour: when list item clicked, selected-food class assigned (works fine) , hidden div containing ingredients not shown on hover. i'm trying achieve .not() method.

actual behaviour: hidden div shown on hover although hovered item has selected-food class assigned.

html

<ul>     <li class="food-name">food 1         <div class="food-ingredients">             <ul>                 <li>ingredient 1</li>                 <li>ingredient 2</li>                 <li>ingredient 3</li>             </ul>         </div>                         </li>     <li class="food-name">food 2         <div class="food-ingredients">             <ul>                 <li>ingredient 1</li>                 <li>ingredient 2</li>                 <li>ingredient 3</li>             </ul>         </div>     </li> </ul> 

css

.food-ingredients {     display: none; }  .selected-food {     color: red; } 

javascript

$('.food-name').not('.selected-food').hoverintent({     over: function() {         $(this).children('.food-ingredients').show();     },      out: function() {         $(this).children('.food-ingredients').hide();     },     timeout: 300 });  $('.food-name').click(function() {     $(this).toggleclass('selected-food'); }); 

when test $('.food-name').not('.selected-food') selector in console expected result (i.e. list items selected-food class not returned)

the hoverintent event bound elements on page load. @ time no elements have class 'selected-food', of them trigger hoverintent event, if later add 'selected-food' class them.

here working example:

$('.food-name').hoverintent({     over: function() {         if (!$(this).hasclass('selected-food')) {             $(this).children('.food-ingredients').show();         }     },      out: function() {         $(this).children('.food-ingredients').hide();     },     timeout: 300 });  $('.food-name').click(function() {     $(this).toggleclass('selected-food'); }); 

link jsfiddle: http://jsfiddle.net/7upcc/8/