jquery 悬停在所有 div 上，而不仅仅是父级答案

【问题标题】：jquery hover on all divs not just parentjquery 悬停在所有 div 上，而不仅仅是父级
【发布时间】：2014-07-20 11:10:01
【问题描述】：

我正在尝试在我悬停的任何 div 上添加边框。因此，当我将鼠标悬停在某个带有类的 div 上时，我会添加一个具有该 div 的类。

但是，如果我有一个父 div 和一些内部 div，当我将鼠标悬停在内部 div 上时，它会在父 div 上放置一个边框。

有没有办法对此进行排序，所以当我将鼠标悬停在它添加边框的内部 div 上时

这是一个 jsfiddle，http://jsfiddle.net/XCcYm/

JS：

$('.columnP, .nameP').each(function() {
    $(this).addClass('pi-edit-row');
});
$('.pi-edit-row').hover(function() {
    $(this).addClass('pi-edit-row-now');
    $(this).append('<div class="edit">edit</div>');
}, function() {
    $(this).removeClass('pi-edit-row-now');
    $(this).find('.edit').remove();
});

HTML：

<div class="columnP">
    <div class="nameP">Awesome</div>
    <p>Blah blah blah</p>
</div>

【问题讨论】：

我不明白，你想在悬停的任何 div 上添加 BORDER 吗？为什么不使用 :hover css？

标签： jquery html css hover

【解决方案1】：

使用鼠标悬停而不是悬停

 $('.pi-edit-row').mouseover(function() {
    $(this).addClass('pi-edit-row-now');
    $(this).append('<div class="edit">edit</div>');
}, function() {
    $(this).removeClass('pi-edit-row-now');
    $(this).find('.edit').remove();
});

更新

$('.pi-edit-row').mouseover(function() {
        $(this).find(".pi-edit-row").addClass('pi-edit-row-now');
        $(this).find(".pi-edit-row").append('<div class="edit">edit</div>');
    }, function() {
        $(this).find(".pi-edit-row").removeClass('pi-edit-row-now');
        $(this)find('.edit').remove();
    });

【讨论】：