how do I select an id and a child tag with Jquery?

I开发者_StackOverflow社区 am trying to select a ul that has an id attribute. It has li tags and within the li tags there are anchor tags. When I mouse out I want the ul and all the elements in it to be hidden.

$('#switch-fighters-results-list').mouseout(function(){
  $(this).hide();
});

here is the markup

<div style="display: block;" id="switch-fighters-results" class="ajax-search-results">
        <ul id="switch-fighters-results-list" class="ajax-search-results-list clrFx">
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/ferrozzo/56">Scott Ferrozzo</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/bessac/63">Scott Bessac</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/adams/191">Scott Adams</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/junk/362">Scott Junk</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/smith/376">Scott Smith</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/baker/555">Scott Baker</a>
            </li>
        </ul>
        <div id="switch-fighter-more-results">
            <a id="switch-fighter-more-results-link">13 more found for <span class="input-string">'scott'</span> »</a>
        </div>
    </div>

---

Have you tried using hover instead? I was able to use hover where mouseout did not work

Fiddle Link

$('#switch-fighters-results-list').hover(function(){},function(){
    $('#switch-fighters-results-list').hide();
});

---

$("#ul[id=id]").find("li").each(function(){
   $(this).mouseout(//do something);
});

---

From the info given, I would say to add "li" in the selector if "switch-fighters-results-list" is the id of the ul:

$('#switch-fighters-results-list li').mouseout(function(){
  $(this).hide();
});

Hope this helps.

---

I don't know if it makes a difference but I was thinking that the propper approach would be:

$('#switch-fighters-results-list ul').mouseout(function(){  $(this).hide();});

---

how do I select an id and a child tag with Jquery?

You would use this:

$('#switch-fighters-results-list li').mouseleave(function(){
  $(this).hide();
});

Where "li" is the child selector. Notice the space :)

However, mouseout is probably not going to do what you expect.

mouseover and mouseout fire every time the mouse cursor hovers over another element, or no longer has a direct "line of sight" to the element for which it fires. mouseenter and mouseleave, on the other hand, fire whenever the mouse leaves the bounding box of the element. Try using mouseleave instead of mouseout.

check this out:

http://jsfiddle.net/FVPxP/3/

The easiest way to hide the entire ul is the following:

This solution directly addresses the problem you have, and completed hides the UL upon exiting it's bounding box.

<ul id="switch-fighters-results-list">
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
</ul>

$('#switch-fighters-results-list').mouseleave(function(){
  $(this).hide();
});

In addition, you won't have to make all of the child li's visible again upon entering the ul, so this is the most direct approach.