jQueryの色を変更してから元の色に戻す

Question

jQueryで色が変更されたページにいくつかのボタンがあり、どのボタンがアクティブであるかを示しています。ホバリング時にのみ色の変更を加えたいと思っています。その後、残ったときに元の色に戻ります（これはjQueryによって指示されます）。

私は、ページが切り替わり、jQueryが色を変えるときを除いて、CSSを上書きする以外は、最初はCSS：.showlink li:hover {color:#aaa;}を使いました。

次に、何かに触れたときに色を変えるという単純な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;} 

は、他のすべてをsuperceedeます。

Answer 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')); 
     } 
    ); 
}); 

Answer 3

私は要素上の元のデータが失われ、このような問題を持っているとき、私はそれを変更する前にmyElement.setAttribute("oldcolor",myElement.style.color)を呼び出し、私が元に戻したいとき、私はそれをそれに設定しました。 myElement.style.color = myElement.getAttribute("oldcolor")

Answer 4

Iは、元のカラー値を記録するためにアレイを使用することをお勧めします、そして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を使用して変更された色を適用するだけで、mouseleaveに再実装するためのCSSカラーのローカルストレージは不要です。

Answer 5

jQueryを使用します。.mouseout()これは.hover（）の逆のようなものです。マウスが.showlink要素を越えてからもう一度オフになると、.mouseout（）が呼び出されます。

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