javascript - 多次克隆一个 div，然后选择除鼠标悬停的那个之外的所有 div(CSS、JS、HTML)

Question

我有一些 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”......我不明白这是为什么, 任何见解将不胜感激。谢谢。

Answer 1

~ 选择器只选择 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 .仅供引用。