Slickgrid, изменение цвета строки при наведении

У меня есть сетка slickgrid, в которой я хочу изменить цвет фона строк при наведении курсора. Я пробовал это:

$(".slick-row").mouseenter(function(){ 
    $(this).css("background-color","red"); 
}).mouseleave(function(){ 
    $(this).css("background-color","white"); 
});

но это не работает. Есть способ сделать это?


jquery slickgrid
person OussamaLord    schedule 11.01.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Поскольку вы используете slickgrid, целевые строки будут динамическими, поэтому используйте делегирование событий для регистрации обработчики событий.

$(document).on('mouseenter', ".slick-row", function () {
    $(this).css("background-color", "red");
}).on('mouseleave', ".slick-row", function () {
    $(this).css("background-color", "white");
});

Также измените селектор $(document) на более конкретный.

person Arun P Johny    schedule 11.01.2014
comment
звучит как работающий, но только нечетные строки имеют фон при наведении на них четной строки нет. - person OussamaLord; 11.01.2014
comment
похоже, что какой-то css с вашего конца перезаписывает стиль .. у вас есть другой стиль для нечетных строк - person Arun P Johny; 11.01.2014
comment
@OussamaLord Я только что протестировал его на странице примера slickgrid mleibman.github.io/SlickGrid /examples/example1-simple.html, и все в порядке - перейдите на страницу - ›откройте консоль браузера -› скопируйте и вставьте скрипт и выполните его - ›наведите указатель мыши на строки - person Arun P Johny; 11.01.2014
comment
Заметил это тоже, я проверяю, не могли бы вы указать мне на стиль нечетной строки, пожалуйста? - person OussamaLord; 11.01.2014
comment
@OussamaLord без просмотра вашей страницы или дополнительной информации о ней мало что может сделать - person Arun P Johny; 11.01.2014
comment
Спасибо, исправлено. Это был конфликт между css-файлами slickgrid и файлом jquery-ui-1.8.16.custom.css, мне пришлось удалить этот файл. - person OussamaLord; 11.01.2014

arrow_upward
9
arrow_downward

Почему бы просто не добавить CSS?

.slick-row:hover{
    background: none repeat scroll 0 0 red;
}
person HeiN    schedule 22.01.2014
comment
Ничего себе! Отлично! Добавьте только этот css. Ваша работа выполнена. Спасибо за это. - person Abhijit Patra; 08.01.2020

arrow_upward
-1
arrow_downward

Попробуй это :

ПРИМЕР

$(".slick-row").hover(function(){ 
    $(this).css("background-color","red"); 
}).mouseout(function(){ 
    $(this).css("background-color","white"); 
});
person Merlin    schedule 11.01.2014
comment
-1, потому что hover должен абстрагироваться от mousein / out, который он инкапсулирует, и также устарел в пользу mouseenter / leave nowa-days. - person Dead.Rabit; 02.02.2016