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（右侧，底部，正面）看起来像一个列并克隆它们，给每个div一个唯一的ID（＃reason0，＃reason1等）< / p>

在CSS中，我试图选择所有列，除了那些正在盘旋的列：

#reason0:hover ~ .reason-container:not(#reason0) {
    display: none;
}

第一个克隆将悬停在其上，此类的所有其他实例（.reason-container）将设置为＆＃34; display：none＆＃34;但是，这只会在目标之后选择兄弟姐妹。这意味着如果使用＃reason1代替，则原因＃0和＃reason-x将保持＆＃34;显示：block＆＃34;而＃reason2 - ＃reason4将是＆＃34;显示：无＆＃34; ......我无法弄清楚为什么会这样，任何见解都会受到高度赞赏。谢谢。

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。只是一个FYI。

Answer 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的建议，我对潜在的解决方案进行了修改，并提出了这个就像我想要的那样。

克隆一个Div多次，然后选择所有Div除了一个被徘徊（CSS，JS，HTML）

2 个答案: