我有一些 HTML/JavaScript 看起来像这样:
<div id="columns-container">
<div class="reason-container" id="reason-x">
<div class="reason">
<div class="right-side"></div>
<div class="bottom-side"></div>
<div class="front-side"><div class="reason-text"></div></div>
</div>
</div>
</div>
<script type="text/javascript">
for(var i=0; i<5; i++){
$(".reason-container:first").clone().appendTo("#columns-container").attr('id', ("reason" + i));
}
</script>
它需要一组我创建的 div(右侧、底部、前端)看起来像一个列并克隆它们,给它们每个一个唯一的 ID(#reason0、#reason1 等)
在 CSS 中,我试图选择所有的列,除了像这样悬停的列:
#reason0:hover ~ .reason-container:not(#reason0) {
display: none;
}
第一个克隆将被悬停,并且该类 (.reason-container) 的所有其他实例将被设置为“显示:无”,但是,这只会选择目标对象之后的 sibling 。这意味着如果使用 #reason1,reason#0 和 #reason-x 将保持“display:block”,而 #reason2 - #reason4 将是“display: none”......我不明白这是为什么, 任何见解将不胜感激。谢谢。
最佳答案
~
选择器只选择 DOM 中处于焦点的兄弟之后的兄弟。在您的情况下,关注的同胞将是 #reason0:hover
。参见 this answer有关兄弟组合器的更多信息。
至于解决方法,您如何看待这个解决方案:
$("#reason0").hover(function() {
$(".reason-container").each(function() {
$(this).css({"display": "none"});
});
$(this).css({"display": "block"});
});
顺便说一下,:not()
选择器有 very poor browser support .仅供引用。
关于javascript - 多次克隆一个 div,然后选择除鼠标悬停的那个之外的所有 div(CSS、JS、HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45445931/