jquery un-hover

Question

Tôi có tập lệnh này để tạo màu nền trên một đoạn khi di chuột qua liên kết trong đoạn văn. Những gì tôi không biết làm thế nào để làm là làm cho nó trở về màu nền ban đầu một khi tôi "un-hover".

$(function(){ 
    $(".box a").hover(function(){ 
    $(this).parent().css('background-color', '#fff200'); 
    }); 
}); 

Cảm ơn!

Answer 1

Hàm dưới đây hoạt động như onmouseover và onmouseout

$(function(){ 
    $(".box a").hover(function(){ 
    $(this).parent().css('background-color', '#fff200'); 
    }, function(){ 
     // change to any color that was previously used. 
     $(this).parent().css('background-color', '#fff200'); 
    }); 
}); 

Answer 2

Có trình xử lý di chuột ra ngoài trong jQuery documentation. Đó là nơi bạn muốn trả lại màu cho bản gốc. Nếu tất cả các bạn đang làm là thay đổi màu sắc, tại sao không sử dụng CSS?

$(function(){ 
    $(".box a").hover(function(){ 
     $(this).parent().css('background-color', '#fff200'); 
    },function(){ 
     $(this).parent().css('background-color', '#originalhexcolor'); 
    }); 
}); 

Answer 3

JQuery

$(".box a").hover(function(){ 
    $(this).parent().css('background-color', '#fff200'); 
}, function() { 
    $(this).parent().css('background-color', '#ffffff'); 
}); 

Xem fiddle.

Answer 4

Nếu bạn phải sử dụng jQuery cho điều này, sử dụng addClass() hơn css():

$('.box a').hover(function(){ 
    $(this).closest('.box').addClass('hoveredOver'); 
}, function(){ 
    $(this).closest('.box').removeClass('hoveredOver'); 
}); 

Với CSS:

.hoveredOver { 
    background-color: #fff; 
} 

JS Fiddle demo.

Tài liệu tham khảo:

• addClass().
• removeClass().