Question

HTML：

<div class="section-header section-header-on" id="section_header_289" style="left: 50px;">
    <span class="collapse"></span>
    <div class="section-name">
        <span class="name">Testing Facebox suff</span></div>
        <ul class="tools">
            <li>
                <a class="trash" href="#"></a>
            </li>
            <li>
                <a href="#" class="edit"></a>
            </li>
        </ul>
    <div class="clear"></div>
</div>

JS：

$j = jQuery.noConflict();
$j(".section-header").hover(function(){
    $j(this).find("ul").show();
});

所以，我需要它是相对的，因为有多个“section-header”，并且ID通常是未知/由应用程序生成的。但是，基本上，我希望能够将鼠标悬停在section-header上，然后从display：none更改ul.tools;显示：阻止。所以我认为.show（）可以做到这一点。但是..我想我的选择器是错的。 = \

Answer 1

Demo

只需要一点强制;）

$j = jQuery.noConflict();
$j(".section-header").hover(function(){
    $j(this).find(".tools").css({visibility:"visible"});
},function(){
    $j(this).find(".tools").css({visibility:"hidden"});
});

Answer 2

你的css指定：

.section-header ul.tools,
.section-content li.content ul.tools {
visibility: hidden;
position: absolute;
top: 0;
left: -40px;
z-index: 1002;
cursor: default;
width: 40px;
height: 35px;
list-style: none;
}

最值得注意的是visibility: hidden;，它不受show()/hide()函数的影响。因此，您需要更改css可见性属性，以便显示列表。

变化：

$j(this).find("ul").show();

要：

$j(this).find("ul").css({visibility: 'visible'});

或者将CSS设置为display: none;而不是使用visibility属性。

show()文档：http://api.jquery.com/show/

Answer 3

只需要一点点css。

.tools {
    display: none;
}

div.section-header:hover ul  {
    display: block;
}

javascript：如何使一个元素相对于我悬停在其上的元素可见？

3 个答案:

Demo