0

我在我的应用程序中添加了以下 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);

});
4

3 回答 3

1

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

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

我也不知道你为什么在动画期间使用fadeTo()a 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);

});
于 2012-08-19T23:05:24.450 回答
0

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

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

根据您粘贴的 html 代码，我认为您只想获取父 div，因此：

var location = $(this).parent();
于 2012-08-19T23:07:31.103 回答
0

而不是使用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);
});
于 2012-08-19T23:08:42.280 回答