jQuery CSS наведите курсор на переменную

Question

Как я могу передать ранее захваченную переменную в фоновое свойство, используя jQuery? Я работаю с очень большой таблицей, множеством ячеек и большим количеством данных. Используется несколько цветов, которые применяются к таблице, а не к ячейке (по уважительной причине).

Вот мой код (сильно сжатый HTML)

<table>
    <tr>
        <td class="nonLevel"><ul class="list"><li>text to go here</li></ul></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
    </tr>
</table>


$(".block").hover(function () {
    var myColor = $(this).css("background-color");

    $(this).css({'background-color' : 'yellow'});
    }, function () {
        var cssObj = {
            'background-color' : myColor,
        }
        $(this).css(cssObj);
    });

Поэтому я пытаюсь зафиксировать исходный цвет при наведении курсора (который работает, когда я передаю переменную myColor в предупреждение), затем изменить цвет на желтый, а затем при переключении обратно на «myColor». *

Я смотрел на addClasss и removeClass, но они, похоже, не имеют ничего общего с тем, как это настроено. Опять же, цвет фона устанавливается в CSS для таблицы, а не для ячейки, это нельзя изменить.

Answer 1

Вы также можете использовать данные jQuery для хранения исходного цвета. А затем наведите курсор мыши.

$(".block").each(function (index, elem) {
    $(elem).data('orginalColor', $(elem).css("background-color"))
}).hover(function () {
    $(this).css({'background-color' : 'yellow'});
}, function () {
    $(this).css({'background-color' : $(this).data('orginalColor')});
});

Вы можете прочитать о данных jQuery здесь: Данные jQuery

Также я бы посоветовал вместо этого использовать делегат (в некоторых случаях jQuery использует его внутри). Это связывает только один обработчик событий для всей таблицы вместо одного для каждого 'td'

$('.block').each(function (index, elem) { //code });
$('table').delegate('td', 'mouseover', function() { //code });
$('table').delegate('td', 'mouseout', function() { //code });

.. Фредрик

Answer 2

Вам не нужно хранить цвет фона или даже использовать JavaScript / jQuery.Вы можете просто использовать CSS:

.block:hover {
   background-color: yellow;
}

Если вам нужно использовать JavaScript (например, потому что вам нужно поддерживать IE6), просто установите цвет фона на пустой:

$(".block").hover(function() {
    $(this).css("background-color", "yellow");
}, function() {
    $(this).css("background-color", "");
});

И если вы все еще думаете, что вам нужно сохранить цвет, используйте функциональность данных jQuerys:

$(".block").hover(function() {
    $(this).data("background-color", $(this).css("background-color"));
    $(this).css("background-color", "yellow");
}, function() {
    $(this).css("background-color", $(this).data("background-color"));
});

Answer 3

Лучший способ справиться с этим, особенно если ваш стол большой, это использовать .live() и .data().

$('.block').live('mouseover mouseout', function(event) {
    var $this = $(this);
    if (event.type === 'mouseover') {
        var myColor = $this.css('background-color');
        $this.data('myColor', myColor);
        $this.css('background-color': 'yellow');
    } else {
        $this.css('background-color', $this.data('myColor'));
    }
});

Горячая демонстрация →

Answer 4

Вы можете вставить существующий цвет в атрибут данных:

$(".block").hover(function () {
    $(this).data("bkg",$(this).css("background-color"));
    $(this).css('background-color', 'yellow');
}, function () {
    $(this).css("background-color", $(this).data("bkg"));
});

Answer 5

Я считаю, что вы должны объявить вашу переменную myColor вне вызова jQuery.В противном случае это должна быть локальная переменная, то есть она выйдет из области видимости, прежде чем hover будет вызван во второй раз в handlerOut.