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

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

将取代其他一切。

Answer 2

我建议使用数组来记录原始颜色值，并在mouseleave的{{1}}（第二）函数中使用它：

hover()

JS Fiddle demo

您还可以使用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')]); }); });和addClass()：

removeClass()

JS Fiddle demo

只使用CSS来应用更改的颜色，并且不需要任何类型的CSS颜色的本地存储来在// Changes color on hover $(function() { $('.showlink').hover(function(){ $(this).addClass('hovered'); }, function(){ $(this).removeClass('hovered'); }); });上重新实现它。

Answer 3

尽管最好使用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 4

当我遇到这样的问题，其中元素的原始数据丢失时，我在更改之前调用myElement.setAttribute("oldcolor",myElement.style.color)，当我想恢复时，我只是将其设置为。 myElement.style.color = myElement.getAttribute("oldcolor")

Answer 5

使用jQuery .mouseout()这就像.hover（）的反转。如果鼠标遍历.showlink元素然后再次关闭它，则调用.mouseout（）。

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

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

5 个答案: