I have a div with an inner div which hi hidden. When I hover over the outter div I wish to show the inner. I am having difficulty doing this. I have tried a few variations but still cant get it.

I will have multiple outer div's on the page also.

<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>

script:

        $("div.listingContainer").mouseover(function() {
            $(this).parent().siblings(".saveCompare").show();
        }).mouseout(function(){

        });

Thanks for any help.

I have a div with an inner div which hi hidden. When I hover over the outter div I wish to show the inner. I am having difficulty doing this. I have tried a few variations but still cant get it.

I will have multiple outer div's on the page also.

<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>
<div class='outdiv'>
    <h1>Content</>
    <div class='innerdiv'></div>
</div>

script:

        $("div.listingContainer").mouseover(function() {
            $(this).parent().siblings(".saveCompare").show();
        }).mouseout(function(){

        });

Thanks for any help.

• javascript
• jquery

• 2 Uhmmm … Did you oversimplify your HTML in the example? Your jQ selectors don't match your markup at all. – vzwick Commented Mar 6, 2012 at 10:31
• Also, there's a CSS only solution for your problem: .outdiv:hover .innerdiv { display: block } – why bother using JS? – vzwick Commented Mar 6, 2012 at 10:33

6 Answers 6

Why are you using jQuery for this? I'd go with a css hover for this one

.outdiv:hover .innerdiv {
  display: block; // adjust for your method of hiding the div
}

You should do something like

    $("div.outerDiv").mouseover(function() {
        $('div.innerDiv', this).show();
    });

or to show / hide

    $("div.outerDiv").hover(function() {
        $('div.innerDiv', this).show();
    },
    function() {
        $('div.innerDiv', this).hide();
    });

try this:

$("div.outdiv").hover(function()
{
    $(this).find(".innerdiv").show();
},
function()
{
    $(this).find(".innerdiv").hide();
});

You can specify a second parameter to $() which specifies the context of the selection - jQuery API.

$('.outdiv').hover(function ()
{
    $('.innerdiv', this).show();
}, function ()
{
    $('.innerdiv', this).hide();
});

http://jsfiddle/pGF3x/

Try this

$(".outdiv").hover(function()
{
        $(this).find(".innerdiv").show();
},
function()
{
         $(this).find(".innerdiv").hide();
});

<script>
        $(document).ready(function () {
            $('.outdiv',this).hover(function () {
                $('.innerdiv',this).css('opacity', '0');
            }, function () {
                $('.innerdiv').css('opacity', '1.0');
            });
        });
</script>

Do like this with JQuery