Question

我正在尝试选择具有id属性的ul。它有li标签，li标签内有锚标签。当我鼠标移出时，我希望ul和其中的所有元素都被隐藏。

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

这是标记

<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>

Answer 1

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

Answer 2

根据给出的信息，如果“switch-fighters-results-list”是ul的id，我会说在选择器中添加“li”：

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

希望这有帮助。

Answer 3

您是否尝试过使用hover？我能够使用hover mouseout无法正常工作

Fiddle Link

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

Answer 4

我不知道它是否有所作为，但我认为适当的做法是：

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

Answer 5

如何选择id和子标签与Jquery？

你会用这个：

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

其中“li”是子选择器。请注意空格：）

然而，mouseout可能无法达到预期效果。

每次鼠标光标悬停在另一个元素上时，鼠标悬停和鼠标输出都会触发，或者不再对其触发的元素有直接的“视线”。另一方面，当鼠标离开元素的边界框时，mouseenter和mouseleave会触发。尝试使用mouseleave而不是mouseout。

检查一下：

<强> http://jsfiddle.net/FVPxP/3/

隐藏整个ul的最简单方法如下：

此解决方案可以直接解决您遇到的问题，并在退出边界框时完成隐藏 UL。

<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();
});

此外，您不必在进入ul时再次显示所有子项，因此这是最直接的方法。

如何使用Jquery选择id和child标签？

5 个答案: