trying to hide a jquery element with no success

Question

Probably a very simple thing I have overlooked, but I cannot seem to find a way to to hide a #panel div using jquery mouseenter. No matter what I try, it just does nothing. I have checked all code several times and all required libraries are loaded. What I am trying to achieve, is that if a user uses the mouse over the drop class and over any

tags in that class, then the #panel stays hidden. I only want to show the #panel when a user has left the menu altogether. Could someone please point out my mistake. Thanks

HTML code

<ul id="menu">
  <li class="menu_right"><a href="#" class="drop">Contact Us</a><!-- Begin 3 columns Item -->

        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->

            <div class="col_3">
                <h2>Which dept do you need to contact!</h2>
            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a id="anchorTest" href="#">Technical</a></li>
                    <li><a href="#">Administrative</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">Billing</a></li>
                    <li><a href="#">Report Error</a></li>
                </ul>   
            <br />
            <div id="formShow">
              <form action="feedback.php" method="post" class="webform">
                <fieldset>
                <legend><span>Submit Technical Report</span></legend>
                <label for="dept">Deaprtment</label>
                <input id="dept" name="dept" class="text" type="text" />
                <label for="name">Full Name:</label>
                <input id="name" name="name" class="text" type="text" />
                <label for="email">Email address:</label>
                <input id="email" name="email" class="text" type="text" />
                <label for="position">Position:</label>
                <input id="Position" name="Position" class="text" type="text" />
                <label for="Feedback">Exact Problem:</label>
                <textarea name="Feedback" cols="20" rows="3">Please make sure that any error messages or numbers are listed here.</textarea>
                </fieldset>
                <input class="submit" type="submit"  name="submit" value="Submit Report" />
              </form>
            </div>

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">General</a></li>

            </div>

            <div class="col_3">
                <h2>Here are some image examples</h2>
            </div>


            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
            </div>

        </div><!-- End 3 columns container -->

    </li><!-- End 3 columns Item -->


</ul>

jquery code

$(function() {
 $("#menu .drop li").mouseenter(function(){
  $("#panel").hide();
});
 });
$(function() {
 $("#menu .drop li").mouseleave(function(){
  $("#panel").show();
});

Panel html

<div id="panel">
        <h3><a href="#">Quick Panel</a></h3>
    <div><span class="newitems">Here, you can view the last 10 stats of your users actions. For example, Logs, Intakes, Returns etc.</span><br />
  </div>
</div>

Upvotes: 0

Views: 99

Answer 1

using

 $("#menu .drop li")

will only work for li-elements that have parents with class "drop", which again have parents with id "menu". And I don't see anything like this in your html code. Using your selector doesn't meen "either .drop or li", but it means "li inside .drop"