Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: technopeasantОтветов: 5

У меня есть несколько кнопок на странице, цвет которых изменяется с помощью 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);
        });
    });
  • если это не имеет значения, просто уничтожьте атрибут стиля: $(this).removeAttr('style'); sled 27.07.2011

javascriptcolorsjquerycsshover

Ответы

Ответ 1 · рейтинг 9 · Wulf

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

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

Ответ 2 · рейтинг 7 · David says reinstate Monica

Я бы рекомендовал использовать массив для записи исходного значения цвета и использовать его в функции 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.

Ответ 3 · рейтинг 2 · Joseph Marikle

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

Ответ 4 · рейтинг 2 · JAAulde

Хотя для этого может быть лучше всего использовать 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') );
        }
    );
} );

Ответ 5 · Steve Seeger

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

    $('.showlink').hover(function(){
        $(this).css('color', '#aaa');
    }
    $('.showlink').mouseout(function(){
        $(this).css('color', '#bbb');
    }

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы