jquery: hide/show div2 inside other div1 on mouseover

Question

I have something like this:

<div id="wrap1">
<div id="util1">
</div>
bla bla
</div>

<div id="wrap2">
<div id="util2">
</div>
bla bla
</div>

<div id="wrap3">
<div id="util4">
</div>
bla bla
</div>

...

I need to show the "util" divs when cursor is over the "wrap" div and hide it back when cursor leaves the "wrap" div

Answer 1

$("div[id^=wrap]").hover(function() {
    $(this).find("div[id^=util]").show();
}, function() {
    $(this).find("div[id^=util]").hide();
});

See:

• http://api.jquery.com/attribute-starts-with-selector/
• http://api.jquery.com/hover/