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

我想让用户在另一个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

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

回答

相关问题