CSS değerini şuradan alın: hocs with .css() - jquery

Question

Farklı arka plana sahip bir menüyü ayarlamıyorum: vurgulu renkler. Düğmelerdeki arka planlar gri renkte olacak ve animate() tuşunu ilgili renge getirecektir.

var origBackgroundColor = $(this).css('background-color'); 

Ama bu mümkün olan bir css den renk elde etmek için: hover belirlerim mülkiyet

ben böyle üzerinde gezdirin ne olursa olsun düğme orijinal varsayılan rengini nasıl çekebilir? Ben her düğme için ayarlanan renkler: sahip olacaksınız çünkü birisi JS etkin değilse navigasyon hala sahip olacaktır: hover etkileri çalışma.

Böyle bir şey (Veya başka bir yolu yoktur):

var hoverColor = $(this).css('background-color:hover'); 

Herhangi bir fikir? Mümkün mü?

Answer 1

:hover sözlüğünün background-color numarasını almak için öncelikle stili uygulamak için bir tarayıcı olayı gerektirecektir. Başka bir deyişle,, fare ile bir vurgulu hale getirdiğinizde alabileceğinizi düşünüyorum, ancak o zamana kadar değil.

Kullanıcı bir gezinti yapana kadar bekleyebilir, sonra rengi yakalayabilir, varsayılan değerle geçersiz kılabilir, ileride başvurmak üzere saklayabilir, ardından animasyonunuzu yapabilir, ancak bu yalnızca JS'nizi koordine eden daha fazla sorun olabilir. ve CSS. Böyle

şey: http://jsfiddle.net/UXzx2/

// grab the default color, and create a variable to store the hovered. 
var originalColor = $('div').css('background-color'); 
var hoverColor; 

$('div').hover(function() { 
     // On hover, if hoverColor hasn't yet been set, grab the color 
     // and override the pseudo color with the originalColor 
    if(!hoverColor) { 
     hoverColor = $(this).css('background-color'); 
     $(this).css('background-color',originalColor); 
    } 
     // Then do your animation 
    $(this).animate({backgroundColor:hoverColor}); 
}); 

Answer 2

  // How about writing anonymous function using JQuery, 
      // that encapsulate the originalColor: 
      $(function() { 
       var originalColor = $('div').css('background-color'); 
       $('div').hover(
        function() { 
         $(this).css('background-color','cyan'); 
        }, 
        function() {        
         $(this).css('background-color', originalColor); 
        } 
       ); 
      });    

Answer 3

jQuery hemen her css seçici ile çalışır, Yani bu durumda da bu iyi çalışması gerekir. Aşağıdaki kodu deneyin.

$("li").hover(function(){ 
 
    var color = $(this).find(".link").css("color"); 
 
    console.log(color); 
 
});

a{ 
 
    color: white; 
 
    background-color: rgb(0, 0, 0); 
 
    font-weight: bold; 
 
    padding: 10px 20px; 
 
} 
 

 
a:hover{ 
 
    color: rgb(255, 165, 0); 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <li><a href="#" class="link">Sample Link</a></li> 
 
</nav>

$ ("targetClassName. Hover "). Css (" background-color"); `