jQuery悬停 - 将类添加到当前（活动）div元素，而不是其他元素答案

【问题标题】：jQuery hover - add class to current (active) div element, not othersjQuery悬停 - 将类添加到当前（活动）div元素，而不是其他元素
【发布时间】：2011-06-06 18:35:52
【问题描述】：

我目前正在为我正在开发的网站上的按钮制作 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");     
    });
});

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

使用next()，如：

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

【讨论】：

【解决方案2】：

不要选择类名，而是执行以下操作：

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

对“find”的调用将获得“this”的后代（在此上下文中，一个具有“.btn”类的对象），因此只有当前 .btn 中的那个会被切换。

【讨论】：

【解决方案3】：

您正在使用一个类作为选择器，因此它当然会将您的新类应用于共享.end-rght-h 或.end-rght-v 类的所有内容。

如果你想影响单个 dom 元素，你可以使用 id：

$('#end1').addClass(...

或者你需要创建一个更具体的选择器：

$('.btn').hover(function() {
    $(this).next('.end-rght-h, .end-rght-v').addClass('hvr');

【讨论】：

【解决方案4】：

感谢大家的建议。我非常感谢您抽出时间回复和帮助。它让我走上了正确的轨道。这是我最终使用的：

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

【讨论】：