0
如何將鼠標懸停在一個對象上並影響其他內容?在我的代碼中,當我將鼠標懸停在向下箭頭上時,我試圖獲得下拉菜單。我試圖用CSS來做,而不是jQuery或JS。將鼠標懸停在一個對象上並使用CSS來影響另一個對象(非jQuery)
HTML
<span class="MyDropDown">Menu Name
<ul class="MyDropDownList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</span>
JS
var x = document.getElementsByClassName('MyDropDown');
for (i = 0; i < x.length; i++) {
var s = x[i].innerHTML.split("<")[0];
var l = '<' + x[i].innerHTML.split("<")[1];
x[i].innerHTML = '<table>\n<tr>\n<td>' + s + '</td>\n<td><div></div></td>\n</tr>\n</table>\n' + l;
}
CSS
.MyDropDown {
display: inline-block;
background-color: #333;
color: #FFF;
border-radius: 5px;
white-space: nowrap;
}
.MyDropDown td:nth-child(1) {
padding:5px 15px;
border-right:1px solid #777777;
}
.MyDropDown td:nth-child(1):hover {
color:#CCC;
}
.MyDropDown div:first-child {
margin: 0px 5px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #FFF;
}
.MyDropDown ul {
display:none;
}
.MyDropDown td:nth-child(2):hover > div:first-child {
border-top-color:#CCC;
}
.MyDropDown td:nth-child(2):hover > td:first-child{ /*this one*/
border-bottom:1px solid #777777;
}
.MyDropDown td:nth-child(2):hover > ul { /*this one*/
display:block;
min-height:15px;
}
可以影響元素下面的東西正在徘徊在做'#elt:#徘徊影響,elt'或相似的,但除此之外,沒有。 – 2014-09-12 21:56:38
'.MyDropDown:hover ul {display:block; }' – APAD1 2014-09-12 21:57:13
如果您沒有在尋找如何顯示箭頭獨佔空間時的菜單,則使用@ APAD1建議。否則你不得不改變你的標記 – 2014-09-12 22:01:26