Lấy giá trị css từ: di chuột với .css() - jquery

Question

Vì vậy, Im thiết lập menu có nền khác nhau: màu di chuột. Các hình nền nút sẽ có màu xám và khi di chuột qua nút animate() đến màu tương ứng của nó.

tôi có thể lấy các màu mặc định ban đầu của nút bất cứ điều gì tôi đưa chuột qua như thế này:

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

Nhưng là nó có thể để có được màu sắc từ một css: hover tài sản mà tôi thiết lập? Tôi sẽ có: màu sắc di chuột được đặt cho mỗi nút vì nếu ai đó không bật JS thì điều hướng sẽ vẫn có: hiệu ứng di chuột hoạt động.

Something như thế này (Hoặc là có một cách khác):

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

Bất kỳ ý tưởng? điều này có thể không?

Answer 1

Tôi khá chắc chắn rằng để có được background-color trong số :hover giả, trước tiên nó sẽ yêu cầu sự kiện trình duyệt để áp dụng kiểu. Nói cách khác, tôi nghĩ bạn có thể nhận được nó khi bạn thực hiện di chuột bằng chuột nhưng không phải cho đến khi đó. Có thể là bạn có thể đợi cho đến khi người dùng di chuột, sau đó lấy màu, ghi đè lên bằng mặc định, lưu trữ nó để tham khảo trong tương lai, sau đó thực hiện hoạt ảnh của bạn, nhưng điều đó có thể khó khăn hơn. và CSS.

Something như thế này: 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 làm việc với hầu hết các selector css, Vì vậy, trong trường hợp này cũng này nên hoạt động tốt. Hãy thử mã bên dưới.

$("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:. Di chuột "). Css (" background-color"); `