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

javascript: how do I make one element visible relative to an element I hover over?

本文关键字：元素 相对于 何使一 javascript 悬停      更新时间：2023-09-26

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

因此，我需要这是相对的，因为有多个"节头"，ID通常是未知的/由应用程序生成的。但是，基本上，我希望能够将鼠标悬停在节标题上，然后将ul.tools从display更改为none；要显示：块。所以我想.show((可以做到。但是我想我的选择器错了

您的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;
}

最显著的是不受CCD_ 2功能影响的CCD_。因此，您需要更改css可见性属性，以便显示您的列表。

更改：

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

收件人：

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

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

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

演示

只是需要一点胁迫；(

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

只需要一点css。

.tools {
    display: none;
}
div.section-header:hover ul  {
    display: block;
}
相关文章：