jquery live hover not working

I ran into some dropdown flickering issue on IE due to mouseover and mouseout , so i changed the code to hover and live as the data is dynamic from ajax.

But the following code is not working , i got the latest jquery also.

The following code is getting executed without error but not working

$('.cs-rec').live("ho开发者_运维问答ver",
        function() {       
        $(this).find('.cs-title').css('text-decoration','underline');
        },
        function() {
         $(this).find('.cs-title').css('text-decoration','none');
        }
    );   

---

If you don't need IE6 support, go with @patrick's solution absolutely.

If you do have to support it: There's no 2 method overload for .live() you need to split up like this:

$('.cs-rec').live("mouseenter", function() {       
  $(this).find('.cs-title').css('text-decoration','underline');
}).live("mouseleave", function() {
  $(this).find('.cs-title').css('text-decoration','none');
});   

Or, (though it's not in the docs yet) in jQuery 1.4.3+ can take a map, like this:

$('.cs-rec').live({
  mouseenter: function() {       
    $(this).find('.cs-title').css('text-decoration','underline');
  },
  mouseleave: function() {
    $(this).find('.cs-title').css('text-decoration','none');
  }
});

---

Binding to hover is possible, but tricky:

As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

You have to use a single method and then switch the behavior based on the event type (code example taken from jQuery docs as well):

$('.hoverme').live('hover', function(event) {
    if (event.type == 'mouseenter') {
        // do something on mouseover
    } else {
        // do something on mouseout
    }
});

---

Is there a reason you don't use CSS for this? IE6 won't work, but most others will.

.cs-red .cs-title {
    text-decoration: none;
}
.cs-red:hover .cs-title {
    text-decoration: underline;
}

EDIT: Looking at your site, if it is the navigation area that you're talking about, you could adjust the markup so that you have an <a> inside each <li> that is expanded to the full width and height of the <li>.

This way, IE6 could be supported (placing the :hover on the <a>).

---

$('.edit_hover').live('hover', function(event) {
  if (event.type == 'mouseenter') {
    // first function here
  } else {
    // second function here
  }
});

---

this is true...

$("#your_div_id").live('mouseover',function(){

    $(this).find(".child_div").css('background-color','#111111');

}).live('mouseout',function(){

     $(this).find(".child_div").css('background-color','#757575');
});