Question

我将以下HTML添加到各种DIV的交叉我的应用程序中。这是我想要仅在悬停的DIV上展示的叠加层。但是，如果我将鼠标悬停在下面带有HTML代码块的任何元素上，则叠加层将显示在所有DIV上。但我只希望叠加显示在DIV上我悬停，而不是全部。我试图找到.parent（），但它不起作用。我究竟做错了什么？

<div id="appBillboard">
    <!-- edit window overlay -->
    <div class="editOverlay">
        <div class="editBTN">
            <div class="editIcon bL5"></div>
            <div class="editTxt bR5 bRLight">EDIT</div>
        </div>
    </div>
</div>

JS：

//HOVER HIDE & SHOW EDIT OVERLAY AND BUTTON

var editBTN = $('.editBTN');
var overlay = $('.editOverlay');

$(editBTN).fadeTo(0, 0.90);

$(overlay).hover(function () {

    //find parent div
    var location = $(this).parent();

    $(overlay, location).fadeTo(0, 1);
    $(editBTN, location).fadeTo(0, 1);
    $(overlay, location).addClass('overlayBKGND');

}, function () {
    $(overlay).removeClass('overlayBKGND');
    $(editBTN).fadeTo(0, 0.90);

});

Answer 1

您需要使用仅限于您所在层次结构的选择器。因此，您不能使用缓存的jQuery对象，因为它们包含所有对象。

此外，您必须重新计算传递给.hover（）的两个函数中的位置变量，因为它们是单独的函数，并且不共享局部变量。

我也不知道你为什么在动画期间使用fadeTo()和0。最好只使用.css("opacity", value)而不是浏览整个动画代码。

将您的代码更改为：

$(overlay).hover(function () {
    //find parent div
    var location = $(this).parent().parent();
    $('.editOverlay', location).fadeTo(0, 1).addClass('overlayBKGND');
    $('.editBTN', location).fadeTo(0, 1);

}, function () {
    var location = $(this).parent().parent();
    $('.editOverlay', location).removeClass('overlayBKGND');
    $('.editBTN', location).fadeTo(0, 0.90);

});

Answer 2

这行代码与'overlay'div的父代相匹配：

var location = $(this).parent().parent();

根据你粘贴的HTML代码，我认为你只想得到父div，所以：

var location = $(this).parent();

Answer 3

为什么不使用parent()，而不是使用$(selector, context)方法并使用this来选择当前的悬停元素？尝试以下方法：

$('.editBTN').fadeTo(0, 0.90);

$('.editOverlay').hover(function () {
    $(this).fadeTo(0, 1).addClass('overlayBKGND');
    $('.editBTN', this).fadeTo(0, 1);
}, function () {
    $(this).removeClass('overlayBKGND');
    $('.editBTN', this).fadeTo(0, 0.90);
});

jQuery - HOVER一次应用于一个CLASS

3 个答案: