可以懸停以顯示既不是孩子也不是兄弟的元素？

我想讓用戶在另一個div上懸停時顯示div。問題是出現的div不是孩子，也不是用戶應該懸停的div的兄弟。我做了一個jsfiddle來展示我的意思是here。可以懸停以顯示既不是孩子也不是兄弟的元素？

當用戶將鼠標懸停在#button上時，如何使#showMe顯示？

#parent{ 
 
    height:200px; 
 
    width:200px; 
 
    background-color:yellow; 
 
} 
 
#button{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
} 
 
#child, #sibling, #showMe{ 
 
    height:50px; 
 
    width:50px; 
 
    background-color:red; 
 
    display:none; 
 
} 
 
#button:hover #child{ 
 
    display:block; 
 
} 
 
#button:hover + #sibling{ 
 
    display:block; 
 
}

<div id="parent">parent 
 
    <div id="button">button<div id="child">child</div></div> 
 
    <div id="sibling">sibling</div> 
 
</div> 
 
<div id="showMe">showMe</div>

來源

2015-04-07 Daffelatte

據我所知，目前還沒有辦法做到這一點。正如你所指出的，你只能用一個孩子或兄弟元素來做到這一點。使用Javascript將是下一個最好的事情。 – Ruddy

嗯，你唯一的選擇是通過JavaScript 做到這一點的Javascript：

function showShowMe() { 
 
    document.getElementById("showMe").style.display = "block"; 
 
} 
 

 
function hideShowMe() { 
 
    document.getElementById("showMe").style.display = "none"; 
 
}

#parent{ 
 
    height:200px; 
 
    width:200px; 
 
    background-color:yellow; 
 
} 
 
#button{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
} 
 
#child, #sibling, #showMe{ 
 
    height:50px; 
 
    width:50px; 
 
    background-color:red; 
 
    display:none; 
 
} 
 
#button:hover #child{ 
 
    display:block; 
 
} 
 
#button:hover + #sibling{ 
 
    display:block; 
 
}

<div id="parent">parent 
 
    **<div id="button" onmouseover="showShowMe()" onmouseout="hideShowMe()">button<div id="child">child</div></div>** 
 
    <div id="sibling">sibling</div> 
 
</div> 
 
<div id="showMe">showMe</div>

來源

2015-04-07 09:06:12 h4r1sh

嗯，實際上這是不可能實現的是由純CSS，你會使用JavaScript。

但是，在這種特殊情況下，我們能以某種方式僞造使用adjacent sibling combinator +在#parent代替，並給予的none一個pointer-events給家長，然後再設置在#button本身的pointer-events價值initial效果。

值得一提的是，關於HTML/XML元素is not supported in IE<=10的pointer-events。

Updated example

#parent{ 
 
    height:200px; 
 
    width:200px; 
 
    background-color:yellow; 
 
    pointer-events: none; 
 
} 
 

 
#parent:hover + #showMe { 
 
    display: block; 
 
} 
 

 
#button{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
    pointer-events: initial; 
 
} 
 
#child, #sibling, #showMe{ 
 
    height:50px; 
 
    width:50px; 
 
    background-color:red; 
 
    display:none; 
 
} 
 
#button:hover #child{ 
 
    display:block; 
 
} 
 
#button:hover + #sibling{ 
 
    display:block; 
 
}

<div id="parent">parent 
 
    <div id="button">button<div id="child">child</div></div> 
 
    <div id="sibling">sibling</div> 
 
</div> 
 
<div id="showMe">showMe</div>

來源

2015-04-07 09:06:44

可以懸停以顯示既不是孩子也不是兄弟的元素？

回答

相關問題