悬停可以显示既不是 child 也不是兄弟姐妹的元素吗？

Question

我试图让 div 在用户悬停在另一个 div 上时出现。问题是出现的 div 既不是 child 也不是 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>

Answer 1

嗯，你唯一的选择是通过 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>

Answer 2

嗯，实际上不可能通过纯粹的 CSS 实现，你会使用 JavaScript。

但在这种特殊情况下，我们可以通过将 none 的 adjacent sibling combinator + over the #parent instead, and giving a pointer-events 用于父级然后将 pointer-events 的值重新设置为 [=17= 来以某种方式伪造效果] 在 #button 本身。

值得一提的是pointer-events on HTML/XML elements is not supported in IE<=10。

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>

悬停可以显示既不是 child 也不是兄弟姐妹的元素吗？

Can hover to display an element that is neither a child or a sibling?

html

css

css-selectors