jQuery悬停 - 将类添加到当前(事件)div元素，而不是其他元素

Question

我目前正在为我正在开发的网站上的按钮开发 jQuery 效果，但遇到了一个我不知道如何修复的小问题。我编写了一个简短的 jQuery 脚本来将类添加到按钮元素内的 div。它将悬停类添加到链接文本旁边的箭头，并在鼠标移开时将其删除 - 非常简单。但是，如果您查看此示例 ( Example )，您会注意到，当您将鼠标悬停在第一个按钮上时，以下按钮中的所有箭头也会被激活，因为它将 css 类添加到页面上的每个元素该类标识符。

Click here查看问题的屏幕截图。

如何让脚本仅将类添加到 div 中的当前箭头而不是页面上的所有其他箭头？这是我的 html、css 和 jQuery:

HTML

<div class="end-lft"></div>
<a href="<?php echo BASE_URL; ?>doctors/" class="btn">Visit our Doctors page</a>
<div class="end-rght-h"></div><!-- This is the element that has a hover class applied when a user hovers over a.btn above -->       

CSS

.end-lft {
    background: url('images/ui/page/btn-lft.jpg') no-repeat 0 0;
    width: 4px;
    height: 33px;
    display: block;
    float: left;
    clear: left;
}

a.btn {
    background: url('images/ui/page/btn-bg.jpg') repeat-x 0 0;
    width: auto;
    height: 33px;
    padding: 6px 7px 0 7px; 
    display: block;
    float: left;
    font-size: 0.9em;       
    text-decoration: none !important;
}

.end-rght-h {
    background: url('images/ui/page/btn-arrw-h.jpg') no-repeat 0 0;
    width: 22px;
    height: 33px;
    display: block; 
    float: left;
    clear: right;
}

.end-rght-v {
    background: url('images/ui/page/btn-arrw-v.jpg') no-repeat 0 0;
    width: 22px;
    height: 33px;
    display: block; 
    float: left;
    clear: right;
}

jQuery

$(document).ready(function() {
    $(".btn").hover(function() {  
        $('.end-rght-h, .end-rght-v').addClass("hvr");    
    },     
    function() {    
        $('.end-rght-h, .end-rght-v').removeClass("hvr");     
    });
}); 

Answer 1

使用next()，如:

$(this)
    .next()
    .$('.end-rght-h, .end-rght-v')
    .addClass("hvr");