无法通过> CSS选择器使列表项可见

Question

将其显示设置为“无”后，无法再次使下面的弹出窗口“ 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）我选择颜色“红色”（第一个列表项）

2）我对setTopColorAndVis（this）的调用使弹出窗口消失（因为用户选择了一个项目，颜色为“红色”，现在不需要该弹出窗口）

3），但是当我将鼠标悬停后在“第一下部项目”列表项，有含“redItem” UL的孩子里，“greenItem”，“blueItem” 不会出现。

因此，我的经验是，我能够成功隐藏名为“ 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";

}