无法使列表项目显示为> CSS选择器

将下方的弹出式菜单'redItem'，'blueItem'和'greenItem'设置为'none'后，无法再将其显示为可见。当鼠标悬停在嵌套列表中较高的节点上时，我使用CSS选择器重新使它们可见。无法使列表项目显示为> CSS选择器

下面的代码：

<ul class="popups" style="vertical-align: bottom; padding: 0px; margin: 0px;"> 
<li style="width: 165px"><a id="topmostBox" href="#">One_high-up_item</a> 
    <ul class="popups"> 
    <li><a href="#">First-lower-item</a> 
    <ul class="popups"> 
    <li name="redItem" ><a href="#" onclick="setTopColorAndVis(this)">Red</a></li> 
    <li name="blueItem"><a href="#" onclick="setTopColorAndVis(this)">Blue</a></li> 
    <li name="greenItem"><a href="#" onclick="setTopColorAndVis(this)">Green</a></li> 
    </ul> 
    </li> 
    </ul> 
</li> 
</ul> 

.popups:hover > li { 
     display: block; 
    } 

.popups { 
    background-color: white; 
    font-family: sans-serif;   
    font-size: 13.5px; 
    list-style: none; 
    position: relative; 
    border: 1px solid lightgray; 
    border-width: .05em; 
    border-top-color: rgb(165,165,165); 
    line-height: 1.2em; 
    display: inline-table; 
} 

function setTopColorAndVis(theNestedPopupAnchor) 
{ 
    var theColorName = theNestedPopupAnchor.innerHTML; 
    var topMenuBox = document.getElementById('topmostBox'); 

    topMenuBox.innerHTML = theColorName ; 
    theNestedPopupAnchor.parentNode.style.display = "none"; 
}

什么情况是这样的：

1）我选择的颜色 '红'（第1列表项）

2）我呼吁setTopColorAndVis（这使得弹出消失（因为用户选择了一个项目，颜色“红色”，现在弹出窗口现在不需要）

3）但是当我稍后将鼠标悬停在“冷杉t-lower-item“列表项，具有包含'redItem'，'greenItem'，'blueItem'的ul的子li将会出现而不是。

所以在这里我的经验是，我能够成功地隐藏名为“redItem”，“blueItem”和“greenItem”列表中的项目 - 但是当我悬停在“第一下部项目”，尽管我的CSS代码：

.popups:hover > li { 
display: block; 
    }

'redItem'，'greenItem'和'blueItem'不会重新出现。

我在这里错过了什么？

来源

2013-12-22 CFHcoder

我相信你隐藏的项目的父。所以你显示的子项目不会显示任何东西，因为父项是隐藏的。我不确定这是否正确，但似乎是这样 –

请提供更多的代码或一个实例，以便我们可以帮助您更多 –

@ZachSaucier，这还没有部署，我必须得到上述工作之前它活着。上面的代码是从一个页面中提取出来的，但现在只需要一个非常简单的页面就可以实现上述功能。 – CFHcoder

内联样式将覆盖你的风格在你的CSS代码。您应该使用onmouseover事件和onmouseout。

尝试

<li name="redItem" ><a href="#" onmouseover="show(this)" onmouseout="hide(this)" onclick="setTopColorAndVis(this)">Red</a></li> 


function show(elem){ 
    elem.parentNode.style.display = "block"; 
} 

function hide(elem){ 
    elem.parentNode.style.display = "none";

}

来源

2013-12-22 18:28:09

按照'inline style'，你的意思是通过编程方式（在我的代码中）将显示设置为none，这使得display：none内联样式？我不知道;我知道内联样式会覆盖CSS类。你的意思是说，当我的代码将显示设置为'无'，'无'成为该项目的内联样式？ – CFHcoder

是的，这就是为什么他们被称为'层叠样式表' –

您可利用display:none元素不:hover，因为它没有大小... ，而不是与display工作，你可以用visibility工作 - 这将留下一个区域悬停。

像这样：

theNestedPopupAnchor.parentNode.style.visibility = 'hidden' 

.popups:hover > li { 
    visibility: visible; 
}

http://www.w3schools.com/cssref/pr_class_visibility.asp

来源

2013-12-22 18:26:44 TastySpaceApple

[W3Fools]（https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CC4QFjAA&url=http%3A%2F%2Fwww.w3fools.com%2F&ei=Ay -3Uo_5ApTnkAfQwIC4Cg＆usg = AFQjCNFCfHZjqL1TEK6qfbpZegOfzTQLIw＆sig2 = I-pOI3h7TwVmw7-13vYX-g），我推荐使用其他来源 –

无法使列表项目显示为> CSS选择器

回答

相关问题