動態 <ul> 和 <li> 懸停在 <ul> 節目 <li>
[英]Dynamic <ul> and <li> on hover in <ul> show <li>
問題描述
我有3個<ul> ，每個<ul>元素都有1個隱藏的<li style="display:none;">懸停在1個<ul>我只想顯示<ul>懸停的<li>
問題是，當我將鼠標懸停在1個<ul>元素上時，它將懸停在所有3個<ul>元素上並顯示所有<li>元素。
下面是我的代碼
<html>
<head>
<script>
function chh()
{
for (var i = 0; i < document.getElementsByTagName("ul").length; i++)
{
document.getElementsByTagName("ul")[i].onmouseover = function()
{
for (var i = 0; i < document.getElementsByTagName("li").length; i++)
{
document.getElementsByTagName("li")[i].style.display = "block";
}
}
}
}
</script>
</head>
<body onLoad="chh();">
<ul>
Friend Request Sent
<li style="display:none;">Cancel Request</li>
</ul>
<ul>
Friend Request Sent
<li style="display:none;">Cancel Request</li>
</ul>
<ul>
Friend Request Sent
<li style="display:none;">Cancel Request</li>
</ul>
</body>
</html>
演示： http : //jsfiddle.net/vZeP4/
2 個解決方案
解決方案1
5 2014-01-15 23:11:10
您可以使用CSS來執行此操作，而無需使用任何JavaScript。
的HTML
<ul>
<li class="message">Friend Request Sent</li>
<li class="cancel">Cancel Request</li>
</ul>
<ul>
<li class="message">Friend Request Sent</li>
<li class="cancel">Cancel Request</li>
</ul>
<ul>
<li class="message">Friend Request Sent</li>
<li class="cancel">Cancel Request</li>
</ul>
的CSS
ul {
margin-bottom: 20px;
}
ul > .cancel {
display: none;
}
ul:hover > .cancel {
display: block;
}
另外，請注意，我已將li Friend Request Sent給Friend Request Sent 。 這是因為ul所有子孫都必須是li 。 那里還有其他內容是無效的html。
解決方案2
2 已采納 2014-01-15 23:07:57
您的第二個循環遍歷所有<li>並將其顯示設置為block 。 您需要選擇懸停在<ul>內的<ul> <li> 。
一個快速的解決方法是：
function chh()
{
for (var i = 0; i < document.getElementsByTagName("ul").length; i++)
{
document.getElementsByTagName("ul")[i].onmouseover = function()
{
this.childNodes[1].style.display = "block";
}
}
}
'li'在懸停顯示下一個'ul'
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.