無法使列表項目顯示爲> 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選擇器

回答

相關問題