Question

I have the following HTML added to various DIV’s cross my application. It’s an overlay that I want to show on only the DIV that’s hovered. However, if I hover over any element with the HTML block of code below, as the overlays will show on all the DIVs. But I only want the overlay to show on the DIV i hover, not all of them. I was attempting to find the .parent(), but it’s not working. What am i doing wrong?

<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

You need to use selectors that are scoped only to the hierarchy that you are in. As such, you can’t use your cached jQuery objects as they include all objects.

In addition, you have to recalculate the location variable in each of the two functions passed to .hover() as they are separate functions and don’t share local variables.

I also don’t know why you’re using fadeTo() with a 0 for the duration of the animation. It’s probably better to just use .css("opacity", value) rather than go through the whole animation code.

Change your code to this:

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

});