Multiple div with same class - mouseenter
Hi!
I have a document with multiple div's with the same class. The div contains another div that I want to show/hide on mouseenter/mouseleave.
Sample html:
- <div class="node">
<div>
content
</div>
<div class="options">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
<div class="node">
<div>
content
</div>
<div class="options">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
<div class="node">
<div>
content
</div>
<div class="options">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
My jquery so far:
- $(document).ready(function () {
$(".node").each(function () {
$(this).mouseenter(function(){
$(".options").show();
});
$(this).mouseleave(function () {
$(".options").hide();
});
});
});
The problem is that on mouseleave, it hides all div's with class "options".
Any ideas??
Thanks!