Home/ Questions/Q 8431603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T05:53:58+00:00

Two things don’t seem to work with this code . I want to be

  • 0

Two things don’t seem to work with this code.

  1. I want to be able to hover the larger DIV in order to bring the smaller one into view.

As it stands, it only works if you hover over the smaller DIV.
2. The smaller DIV doesn’t disappear when I stop hovering.

<div class="one">
    <div class="two"></div>
</div>

<div class="one">
    <div class="two"></div>
</div>


.one {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #CCC;
}
.two {
    position: relative;
    top: 20px;
    left: 20px;
    height: 40px;
    width: 40px;
    background: #333;
}


/* Fade-in text over images */
$(function(){
    $(".two").css("opacity",0).fadeTo(0, 0);
    $(".two").mouseover(function () {
        $(this).fadeTo(200, 1);
    });
    $("two").mouseout(function () {
        $(this).fadeTo(200, 0);
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because you are selecting smaller div tags. 

    $(function() {
    $(".two").hide();
    $(".one").hover(function() {
        $('.two', this).fadeIn(200);
    }, function() {
        $('.two', this).fadeOut(200);
    });
});

    Fiddle

    • 0