jQuery изменить наведение на цвет, а затем вернуться к исходному цвету

У меня есть несколько кнопок на странице, цвет которых изменяется с помощью jQuery, показывая, какая из них активна. Я хотел бы добавить изменение цвета ТОЛЬКО при наведении курсора, после чего он возвращается к исходному цвету (который продиктован jQuery), когда его оставляют.

Сначала я использовал css: .showlink li:hover {color:#aaa;}, который работает правильно, за исключением того, что когда страницы переключаются, а jQuery меняет цвета, он заменяет CSS.

Затем я решил использовать простой jQuery, который говорит, что когда что-то наведено, измените его цвет. это не работает полностью, потому что оно постоянно меняет цвет. Чтобы смягчить это, я немного добавил функцию, которая возвращает ему другой цвет.

Можно ли каким-то образом вернуть ему исходный цвет, который был до того, как он был изменен при наведении курсора?

// Changes color on hover
    $(function() {
        $('.showlink').hover(function(){
            $(this).css('color', '#aaa');
        },
        function(){
           $(this).css('color', '#f3f3f3');
        });
    });
//Changes color depending on which page is active, fades that page in
    $(function(){
        $('#show_one').css('color', '#ffcb06');
        $('#two, #three').hide();
    });

    $('.showlink').click(function(){
        $('.showlink').css('color', '#f3f3f3');
        $(this).css('color', '#ffcb06');
        var toShow = this.id.substr(5);
        $('div.page:visible').fadeOut(600, function(){
            $('#' + toShow).fadeIn(600);
        });
    });

javascript colors jquery css hover
person technopeasant    schedule 26.07.2011    source источник
comment
если это не имеет значения, просто уничтожьте атрибут стиля: $(this).removeAttr('style');   -  person sled    schedule 27.07.2011

Ответы (5)


arrow_upward
9
arrow_downward 

.showlink li:hover {color:#aaa !important;}

превзойдет все остальное.

person Wulf    schedule 26.07.2011
comment
Мне помогло, спасибо. Иногда простые вещи лучше всего - person Richard C; 05.10.2016
comment
Не уверен, что понимаю, как это может быть принятым ответом, когда он, похоже, не отвечает на исходный вопрос ОП. @DavidThomas, с другой стороны, явно это делает. Странный. (Думаю, это то, что на самом деле хотел знать OP.): / - person Scott Fraley; 06.06.2017
comment
Насколько я помню и понимаю, он сначала пытался установить цвет при наведении с помощью класса css hover без !important, и это не сработало, как только он изменил базовый цвет с помощью jquery (потому что определение стиля-тега более высокий рейтинг, чем cssclass-definition. !important оценит это определение выше, чем все остальное. - person Wulf; 07.06.2017

arrow_upward
7
arrow_downward

Я бы рекомендовал использовать массив для записи исходного значения цвета и использовать его в функции mouseleave (вторая) hover():

var originalColors = [];

// Changes color on hover
    $(function() {
        $('.showlink').hover(function(){
            originalColors[$(this).index('.showlink')] = $(this).css('color');
            $(this).css('color', '#aaa');
        },
        function(){
           $(this).css('color', originalColors[$(this).index('.showlink')]);
        });
    });

демонстрация JS Fiddle.

Вы также можете использовать addClass() и removeClass():

// Changes color on hover
$(function() {
    $('.showlink').hover(function(){
        $(this).addClass('hovered');
    },
    function(){
        $(this).removeClass('hovered');
    });
});

демонстрация JS Fiddle.

Который просто использовал бы CSS для применения измененного цвета и не требовал бы какого-либо локального хранилища цвета CSS для повторной реализации его на mouseleave.

person David says reinstate Monica    schedule 26.07.2011

arrow_upward
2
arrow_downward

когда у меня возникают подобные проблемы, когда исходные данные элемента теряются, я вызываю myElement.setAttribute("oldcolor",myElement.style.color) перед его изменением, и когда я хочу вернуться, я просто устанавливаю его на это. myElement.style.color = myElement.getAttribute("oldcolor")

person Joseph Marikle    schedule 26.07.2011

arrow_upward
2
arrow_downward

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

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

Демонстрация:

http://jsfiddle.net/JAAulde/TpmXd/

Код:

/* Changes color on hover */
$( function()
{
    $( '.showlink' ).hover(
        function()
        {
            /* Store jQuerized element for multiple use */
            var $this = $( this );

            $this
                /* Set the pre-color data */
                .data( 'prehovercolor', $this.css( 'color' ) )
                /* Set the new color */
                .css( 'color', '#aaa' );
        },
        function()
        {
            /* Store jQuerized element for multiple use */
            var $this = $( this );

            $this
                /* Set the color back to what is found in the pre-color data */
                .css( 'color', $this.data( 'prehovercolor') );
        }
    );
} );
person JAAulde    schedule 26.07.2011

arrow_upward
0
arrow_downward

Используйте jQuery .mouseout(), это похоже на обратную функцию .hover(). Если мышь проходит над элементом .showlink, а затем снова выходит за его пределы, вызывается .mouseout().

    $('.showlink').hover(function(){
        $(this).css('color', '#aaa');
    }
    $('.showlink').mouseout(function(){
        $(this).css('color', '#bbb');
    }
person Steve Seeger    schedule 09.05.2016