Hide/Show Sibling Element
Consider the following:
- <div id="item-1">
- <a href="#">The Link</a>
- <div>The contents shown on hover only</div>
- </div>
I'm positioning elements absolutely. I want the child DIV to show when I hover over the link. Here is how I'm accomplishing this:
- $("#item-1 a").mouseover(function() {$("#item-1 div").fadeIn('fast');})
- $("#item-1 a").mouseout(function() {$("#item-1 div").fadeOut('fast');})
This works wonderfully. But I would really like to make this generic so that I need 2 lines of code, not 2 times however many items I have.
Any ideas?