Clone One Div Multiple Times, And Then Select All Divs Except The One Being Hovered Over (CSS, JS, HTML)

Question

I have some HTML/JavaScript that looks likes this:

                <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>

It takes a set of divs I've created (right, bottom, front-side) to look like a column and clones them, giving them each a unique id (#reason0, #reason1, etc.)

In CSS, I'm trying to select all of the columns except the one being hovered over like so:

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

Where the first clone would be hovered over, and all other instances of this class (.reason-container) would be set to "display: none" however, this only selects the siblings after the one being targeted. Meaning that if #reason1 was used instead, reason#0 and the #reason-x would remain "display:block" while #reason2 - #reason4 would be "display: none" ... I can't figure out why this is, and any insight would be much appreciated. Thank you.

score 0 · Answer 1 · answered Aug 01 '17 at 19:32

0

The ~ selector only selects siblings after the sibling in focus, in the DOM. In your case, the sibling in focus would be #reason0:hover. See this answer for more information on the sibling combinator.

As for a workaround, what do you think of this solution:

$("#reason0").hover(function() {
    $(".reason-container").each(function() {
        $(this).css({"display": "none"});
    });
    $(this).css({"display": "block"});
});

By the way, the :not() selector has very poor browser support. Just an FYI.

answered Aug 01 '17 at 19:32

HuskyBlue

176
1
1
8

I like it; however, this permanently changes the display of the other columns (for some reason), meaning once the hover is released, the display property remains "none." Any thoughts on how to take this one step further to fix that? – laroy Aug 01 '17 at 19:42
Yes, here's a [Fiddle](https://jsfiddle.net/qo96m9ag/1/) allowing that functionality. – HuskyBlue Aug 01 '17 at 20:28

score 0 · Answer 2 · answered Aug 01 '17 at 20:07

    <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>

going off of what HuskyBlue suggested, I tinkered around with the potential solution and came up with this which works just as I want it to.

Clone One Div Multiple Times, And Then Select All Divs Except The One Being Hovered Over (CSS, JS, HTML)

2 Answers2