Multiple div with same class - mouseenter

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:
  1. <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:
  1. $(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!