Jquery альтернативный цвет строки не работает после функции наведения - PullRequest
Новая
       43

Jquery альтернативный цвет строки не работает после функции наведения

1 голос
/ 23 марта 2010

Я использую следующие операторы jquery, 

$(".resultsdiv:odd").css("background-color", "#fff");
$(".resultsdiv:even").css("background-color", "#EFF1F1");
$('.resultsdiv').hover(function() {
      $(this).css('background-color', '#f4f2f2');
   },
   function() {
      $(this).css('background-color', '#fff');
});

Поначалу кажется, что с альтернативой все в порядке, но после наведения на элемент div он не работает ... Любое предложение ...

Ответы [ 5 ]

8 голосов
/ 23 марта 2010

Мое предложение - не манипулировать стилем напрямую, используйте классы.Итак, CSS: 

.resultsdiv { background-color: #FFF; }
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; }

с: 

$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
  $(this).addClass("resultshover");
}, function() {
  $(this).removeClass("resultshover");
});

Проблема с вызовом типа: 

$(this).css("background", "#FFF");

в том, что у вас нет возможности узнать, как выполнить сбросэлемент в исходное состояние, потому что его первоначальный цвет также может быть установлен как встроенный стиль, как это имеет место в вашем примере кода.Классы только делают эту проблему намного проще.

1 голос
/ 07 января 2014

я использовал эти коды для отображения альтернативного цвета, наведения мыши и выбранного цвета строки. Highlight.it будет работать если вы генерируете строку таблицы с помощью ajax, просто вызовите этот скрипт, и он будет работать. 

function rowHighlight(){            
    $(function(){
    $("#facCodes tr:odd").addClass('oddRow');
    $("#facCodes tr:even").addClass('evenEven');
    $('#facCodes tr').hover(function() {
          $(this).addClass('hover');
       },
       function() {
          $(this).removeClass('hover');
    });

});
 $('#facCodes tr').click(function(event){
    $(this).addClass("click").siblings().removeClass("click");
 });

}
1 голос
/ 06 апреля 2012

Я использую следующий код.Таблица извлекается с помощью ajax.После успешного выполнения ajaxing я запускаю функцию tableready ().внутри этого у меня есть следующий код, который отлично работает с сортировщиком таблиц с виджетом зебры. 

 $("#ResultsDisplay").tablesorter({ widgets: ["zebra"] });
    $("#ResultsDisplay").trigger("update");
    $(".tablesorter tr").mouseover(function(){ $(this).addClass("over");});
    $(".tablesorter tr").mouseout(function () { $(this).removeClass("over"); });

    $('.tablesorter tr').click(function () {
        if ($(this).hasClass('colorMe')){
            $(this).removeClass('colorMe');
        }
        else {
            $(this).closest('table').find('tr').removeClass('colorMe');
            $(this).addClass('colorMe');
        }
    });
1 голос
/ 23 марта 2010 
<style type="text/css">
  .resultsdiv.odd { background-color: #fff }
  .resultsdiv.even { background-color: #EFF1F1 }
  .resultsdiv.highlight { background-color: #f4f2f2 }
</style>

<script type="text/javascript">
$(function(){
    $(".resultsdiv:odd").addClass('odd');
    $(".resultsdiv:even").addClass('even');
    $('.resultsdiv').hover(function() {
          $(this).addClass('highlight');
       },
       function() {
          $(this).removeClass('highlight');
    });
});
</script>
0 голосов
/ 23 марта 2010

При наведении мыши вы устанавливаете цвет строки на #fff, это будет хорошо выглядеть для нечетных строк, но не для четных.

При наведении мыши вам нужно проверить, нечетное оно или четное, и соответственно установить цвет.

...