Question

将显示设置为“none”后，我无法再将弹出窗口'redItem'，'blueItem'和'greenItem'再次显示在下面。当鼠标悬停在嵌套列表中较高的节点上时，我正在使用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（this）的调用使弹出窗口消失（因为用户选择了一个项目，颜色为“Red”，现在现在不需要弹出窗口）

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

所以我的经验是，我成功地隐藏了名为'redItem'，'blueItem'和'greenItem'的列表项 - 但是当我悬停超过“First-lower”时-item“，尽管我的CSS代码：

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

'redItem'，'greenItem'和'blueItem'不再出现。

我在这里缺少什么？

Answer 1

你不能:hover覆盖display:none的元素，因为它没有大小...... 与display合作，您可以使用visibility - 这会留下一个悬停的区域。

像这样：

theNestedPopupAnchor.parentNode.style.visibility = 'hidden'

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

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

Answer 2

内联样式会覆盖您在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";

}

使用＆gt;无法显示列表项CSS选择器

2 个答案: