Question

I’m using the datatables plugin to display a table. In the configuration parameters I’ve set bJQueryUI : true so the table apply the style of the current jQuery UI style that I’m working with. In the last column I’ve added some icons to do actions over the row. The thing is that the hover event over the icons and headers of the datatable only works in Firefox, in Chrome or IE the event is not triggered.

The code I’m using is this:

$('.ui-state-default').live({ 
    mouseenter:
         function(){ $(this).addClass('ui-state-hover'); },
    mouseleave:
         function(){ $(this).removeClass('ui-state-hover'); }
});

Answer 1

Have you checked in your Developer Tools the layering of the elements in the region you want to hover? You should check the z-index of items to make sure that the .ui-state-default elements are on top.

Also you should change-out .live() for .delegate(). They are similar but you can set the root element with .delegate() and with .live() the root element is always the document element:

$(<root element>).delegate('.ui-state-default', 'mouseenter', function () {...}).delegate('.ui-state-default', 'mouseleave', function () {...});

.live() has been depreciated as of jQuery 1.7. There is a new function as of jQuery 1.7 called .on() and it does the same thing as both .bind() and .delegate() depending on the syntax used: http://api.jquery.com/on