javascript：如何使一个元素相对于我 hover 的元素可见？

Question

http://jsfiddle.net/awfex/4/

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

So, I need this to be relative, because there are multiple "section-header"s and the ID is generally unknown / generated by the app. But, basically, I want to be able to hover over the section-header, and then have ul.tools change from display: none;to display: block. So I figured.show() could do that. but.. I guess my selector is wrong. =\

Answer 1

Demo

just needed a little coercion;)

$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

Your css specifies:

.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;
}

Most notably visibility: hidden; which is not affected by the show()/hide() functions. So you need to change the css visibility property so your list will show-up.

Change:

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

To:

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

Or set the CSS to display: none; rather than use the visibility property.

show() documentation: http://api.jquery.com/show/

Answer 3

Just needed a little css.

.tools {
    display: none;
}

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