Question

当用户将鼠标悬停在另一个div上时，我试图让div出现。问题是，出现的div既不是孩子也不是用户应该悬停的div的兄弟。我做了一个jsfiddle来表明我的意思here。

当用户将鼠标悬停在#showMe上时，如何显示#button？

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

嗯，你唯一的选择就是通过Javascript来做使用Javascript：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

嗯，实际上不可能通过纯CSS来实现这一点，并且您使用JavaScript。

但是在这种特殊情况下，我们可以通过#parent而不是none代替pointer-events并向父母提供adjacent sibling combinator +，然后再重新伪造效果 - 在initial本身上设置#button到#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; }的值。

值得一提的是pointer-events关于HTML / XML元素pointer-events。

<强> is not supported in IE<=10

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

2 个答案: