Obtenga el valor de css de: hover con .css() - jquery

Question

Así que estoy configurando un menú que tiene diferentes antecedentes: los colores de desplazamiento. Los fondos de los botones serán de color gris y al pasar el botón animate() a su color respectivo.

puedo agarrar el color original por defecto de cualquier botón que se ciernen sobre este aspecto:

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

Pero es posible para obtener el color de un css: hover propiedad que puse? Dispondré de: los colores de desplazamiento establecidos para cada botón, porque si alguien no tiene habilitado JS, la navegación seguirá teniendo: los efectos de desplazamiento funcionan.

Algo como esto (O hay otra manera):

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

¿Alguna idea? ¿es posible?

Answer 1

Estoy bastante seguro de que para obtener el background-color del :hover pseudo, primero se requerirá un evento del navegador para aplicar el estilo. En otras palabras, creo que podrías obtenerlo cuando pasas el mouse sobre el mouse, pero no hasta entonces.

Podría ser que podría esperar hasta que el usuario pase el mouse, luego tomar el color, anularlo por defecto, guardarlo para referencia futura, luego hacer su animación, pero eso puede ser más problemático que simplemente coordinar su JS y CSS.

Algo como esto: 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 trabaja con casi todos selector CSS, Así que en este caso también esto debería funcionar bien. Pruebe el código a continuación.

$("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:. Flotar "). Css (" background-color"); `