Cách: Thêm/Loại bỏ Lớp trên chuộtOver/mouseOut - JQuery .hover?

Question

Bạn muốn thay đổi màu đường viền trên một hộp ..

..when người dùng di chuyển chuột qua từng lần ra/..

Dưới đây là mã cố gắng .. Nhu cầu làm việc!

JQuery:

<script> 
$("result").hover(
    function() { 
    $(this).addClass("result_hover"); 
    }, 
    function() { 
    $(this).removeClass("result_hover"); 
    } 
); 
</script> 

CSS3:

<style> 
    .result { 
    height: 72px; 
    width: 100%; 
    border: 1px solid #000; 
    } 
    .result_hover { 
    border: 1px solid #fff; 
    } 
</style> 

HTML5:

<div class="result"> 
    <div class="item"> 
    <div id="item1"> 
     <i class="icon"></i>&nbsp;## 
    </div> 
    </div> 
<div> 

Cám ơn tìm

Answer 1

Bạn quên dot của class selector kết quả c lass.

Live Demo

$(".result").hover(
    function() { 
    $(this).addClass("result_hover"); 
    }, 
    function() { 
    $(this).removeClass("result_hover"); 
    } 
); 

Bạn có thể sử dụng toggleClass trên hover kiện

Live Demo

$(".result").hover(function() { 
    $(this).toggleClass("result_hover"); 
}); 

Answer 2

Bạn chỉ có thể sử dụng: {trong và ngoài chức năng gọi lại}

$(".result").hover(function() { 
    $(this).toggleClass("result_hover"); 
}); 

Ví dụ của bạn, tốt hơn sẽ được sử dụng CSS pseudo lớp :hover: {không js/jquery cần}

.result { 
    height: 72px; 
    width: 100%; 
    border: 1px solid #000; 
    } 
    .result:hover { 
    background-color: #000; 
    } 

Answer 3

Bạn đang thiếu các dấu chấm trên bộ chọn, và bạn có thể sử dụng phương pháp toggleClass trên jquery:

$(".result").hover(
    function() { 
    $(this).toggleClass("result_hover")  
    } 
); 

Answer 4

chọn của bạn thiếu một . và mặc dù bạn nói rằng bạn muốn thay đổi border-color - bạn đang thêm và loại bỏ một lớp mà đặt background-color