多次克隆一个 div，然后选择除悬停的那个以外的所有 div（CSS、JS、HTML）答案

【问题标题】：Clone One Div Multiple Times, And Then Select All Divs Except The One Being Hovered Over (CSS, JS, HTML)多次克隆一个 div，然后选择除悬停的那个以外的所有 div（CSS、JS、HTML）
【发布时间】：2018-01-08 19:10:56
【问题描述】：

我有一些看起来像这样的 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) 将设置为“显示：无”，但是，这只会选择目标对象之后的兄弟姐妹。这意味着如果使用#reason1，则reason#0 和#reason-x 将保持“display:block”，而#reason2 - #reason4 将是“display:none”......我不知道为什么会这样，任何见解将不胜感激。谢谢。

【问题讨论】：

标签： javascript html css hover clone

【解决方案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。仅供参考。

【讨论】：

我喜欢它；但是，这会永久更改其他列的显示（出于某种原因），这意味着一旦释放悬停，显示属性将保持“无”。关于如何进一步解决这个问题的任何想法？
是的，这是一个Fiddle 允许该功能。

【解决方案2】：

    <script type="text/javascript">
        $("#reason0").hover(function() {
            $(".reason-container").each(function() {
                $(this).css({"display": "none"});
            });
            $(this).css({"display": "block"});
        },
        function() {
            $(".reason-container").each(function() {
                $(this).css({"display": "block"});
            })
        });
    </script>

根据 HuskyBlue 的建议，我对潜在的解决方案进行了修补，并想出了这个解决方案，它就像我想要的那样工作。

【讨论】：