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

Posted 2023-03-06

【中文标题】jQuery更改悬停在颜色上，然后返回原始颜色

【英文标题】：jQuery change hover on color, then return back to original color

【发布时间】：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');

【参考方案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');