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

Question

У меня есть несколько кнопок на странице, цвет которых изменяется с помощью 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);
        });
    });

Answer 1

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

Answer 2

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

заменит все остальное.

Answer 3

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

Answer 4

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

Answer 5

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

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