Ottieni il valore css da: hover con .css() - jquery

Question

Im impostando un menu con uno sfondo diverso: i colori di passaggio del mouse. Gli sfondi dei pulsanti saranno di colore grigio e al passaggio del mouse il pulsante animate() al rispettivo colore.

posso afferrare il colore predefinito originale del tasto qualunque cosa con il mouse sopra in questo modo:

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

Ma è possibile per ottenere il colore da un CSS: hover proprietà che ho impostato? Avrò il: hover colori impostati per ogni pulsante, perché se qualcuno non ha JS abilitato la navigazione avrà ancora: effetti hover funzionanti.

Qualcosa di simile (O c'è un altro modo):

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

Tutte le idee? È possibile?

Answer 1

Sono abbastanza sicuro che per ottenere lo background-color dello pseudo :hover, sarà prima necessario un evento del browser per applicare lo stile. In altre parole, penso che potresti ottenerlo quando fai un passaggio del mouse con il mouse, ma non prima di allora.

Potrebbe essere che si possa attendere fino a quando l'utente esegue il passaggio del mouse, quindi prendere il colore, sovrascriverlo con il valore predefinito, memorizzarlo per riferimento futuro, quindi eseguire l'animazione, ma potrebbe essere più problemi che semplicemente coordinando il proprio JS e CSS.

Qualcosa di simile a questo: 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 funziona con quasi tutti i selettore CSS, Quindi, in questo caso anche questo dovrebbe funzionare bene. Prova il codice qui sotto.

$("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"); `