CODEWITHSUNDEEP
htmlcss
amdvb
amdvb

Reputation: 209

show div inside another div on hover

I have two divs; one inside the other one. I would like to show the inner div when hovered on the outer div, otherwise the inner div should be hidden. The outer div has an image in it as well (sibling of the inner div) which is always displayed, so when hovered over the image it will also show the text. Can someone help me?

<script>
 $(".divone").hover(
    function () {
       $(".divtwo").css("visibility","visible");
    },
    function () {
       $(".divtwo").css("visibility","hidden");
    }
 );
</script>


<div class="divone">
   <div class="divtwo">some text here</div>
   <img src="images/test.png" />
</div>


.divtwo{
    background-color:red;
    top:120px;
    height:50px;
    width:223px;
    position:absolute;
    visibility: hidden;
}

.divone{
     height:169px;
 position:relative;
}

Upvotes: 2

Views: 3042

Answers (2)

palerdot
palerdot

Reputation: 7642

You can attach the events to mouseenter and mouseleave events like this.

$(".divone").mouseenter(function () {
   $(".divtwo").css("visibility","visible");
});

$(".divone").mouseleave(function () {
   $(".divtwo").css("visibility","hidden");
});

Upvotes: -1

ced-b
ced-b

Reputation: 4065

You could also have a style like this:

.divone:hover .divtwo {
   visibility: visible;
}

No JS required.

Upvotes: 7

Related Questions