jquery将鼠标悬停在所有div上，而不仅仅是父级

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

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

有没有一种方法可以对其进行排序，这样当我将鼠标悬停在内部div上时，它会添加边框

这是一个JSFIDLE

JS:

$（'.columnP，.nameP'）。每个（函数（）{
$（this.addClass（'pi-edit-row'）；
});
$（'.pi编辑行'）。悬停（函数（）{
$（this.addClass（'pi-edit-row-now'）；
$（this.append（'edit'）；
}，函数（）{
$（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>

真棒
废话废话

使用鼠标悬停代替鼠标悬停

 $('.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编辑行'）.mouseover（函数（）{
$（this.addClass（'pi-edit-row-now'）；
$（this.append（'edit'）；
}，函数（）{
$（this.removeClass（'pi-edit-row-now'）；
$（this.find（'.edit'）.remove（）；
});

更新

$（'.pi编辑行'）.mouseover（函数（）{
$（this.find（“.pi edit row”）.addClass（'pi-edit-row-now'）；
$（this）.find（“.pi编辑行”）.append（'edit'）；
}，函数（）{
$（this.find（“.pi edit row”）.removeClass（'pi-edit-row-now'）；
$（此）查找（'.edit'）.remove（）；
});

我不明白，您想在悬停的任何div上添加边框吗？为什么不使用：悬停css？

 $('.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();
    });