jQuery更改悬停在颜色上，然后返回原始颜色答案

【问题标题】：jQuery change hover on color, then return back to original colorjQuery更改悬停在颜色上，然后返回原始颜色
【发布时间】：2011-10-13 18:00:54
【问题描述】：

我在页面上有一些按钮，它们的颜色通过 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);
        });
    });

【问题讨论】：

如果没关系，直接杀掉style属性：$(this).removeAttr('style');

标签： javascript jquery css colors hover

【解决方案1】：

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

将取代其他一切。

【讨论】：

帮助我，谢谢。有时简单的事情是最好的
当它似乎没有回答 OPs 的原始问题时，我不确定我是否在探索如何成为公认的答案。另一方面，@DavidThomas' 显然是这样。诡异的。（我想这是 OP 真正想知道的。）：/
据我记忆和理解，他首先尝试使用没有!important 的css悬停类来设置悬停颜色，但是一旦他用jquery（因为 style-tag-definition 的评分高于 cssclass-definition。!important 会将此定义评分高于其他所有内容。

【解决方案2】：

尽管为此使用 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') );
        }
    );
} );

【讨论】：

【解决方案3】：

当我遇到类似元素上的原始数据丢失的问题时，我会在更改它之前调用myElement.setAttribute("oldcolor",myElement.style.color)，当我想恢复时，我只需将其设置为该值即可。 myElement.style.color = myElement.getAttribute("oldcolor")

【讨论】：

【解决方案4】：

我建议使用数组来记录原始颜色值，并在hover()的mouseleave（第二个）函数中使用：

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 demo.

您也可以使用addClass() 和removeClass()：

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

JS Fiddle demo.

这将简单地使用 CSS 来应用更改的颜色，并且不需要任何类型的 CSS 颜色的本地存储来在 mouseleave 上重新实现它。

【讨论】：

【解决方案5】：

使用 jQuery .mouseout() 这就像 .hover() 的逆。如果鼠标经过 .showlink 元素然后又离开它，则调用 .mouseout()。

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

【讨论】：