Change "display:none" to "display:block" with on hover doesn't work

Question

Ok so thats the problem here: I want a panel to be displayed when I hover over each nav li item. But it just don't work.

The html:

         <nav class="row">
                <ul class="nav header-nav">
                    <li>
                        <a href="#">item 1</a>
                    </li>
                    <li>
                        <a href="#">item 2</a>
                    </li>
                     <li>
                        <a href="#">item 3</a>
                    </li>
                </ul>  
            </nav>
            <div class="dropdown-parent">
                <div class="dropdown-panel row">

                </div>  
            </div>

And here's the css:

.header-nav{
    height: 80px;
    width:100%; 
    display: flex;
    justify-content: space-between;
    li{
        background-color:$honey;   
        position: relative;  
        height:77px;  
        width:9.8%;
        margin:1px; 
        margin-top:0px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: inset 0 0 10px 0px black;

        a{
            color:black;
            text-decoration: none;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
    }
}

.dropdown-parent{
    text-align: center;
    display:none;
    .dropdown-panel{
        margin-top:2px;
        padding-top:50px;
        padding-bottom:50px;
        display:inline-block;
        width:95%;
        height: auto;
        background-color:white;
        z-index:1;
        box-shadow: inset 0 0 10px 0px black;
    }
}

So I made a simple css on hover animation to display .dropdown-parent:

.header-nav{
    li{
        &:hover{
            .dropdown-parent{
                display:block !important;
            }
        }
    }
}

Unfortunately It didn't work and I can't pinpoint the reason why. I even tried to bypass the issue by using jquery but that doesn't seem to help either...

$(document).ready(function(){
$("header-nav li").hover(function(){
    $("dropdown-parent").css("display", "block");
});

});

So what's going on here?

The dupe link explains the selector issue (and have some script replacements), your own script has some typo's, missing the dot in `.class-selector`. — Asons, Aug 10 '19 at 08:02
Simply put, CSS selectors can only target children and siblings with a shared parent. — Asons, Aug 10 '19 at 08:04

score 1 · Answer 1 · answered Aug 01 '19 at 07:58

1

You can't do it in CSS, as CSS doesn't work this way- it's cascading style sheet, meaning you cannot control elements what are not children of your selector, and in your case header-nav and dropdown-parent are not even siblings. Your JS solution should work nicely, but you have wrong selectors there, it should be:

$(document).ready(function(){
  $(".header-nav li").hover(function(){
    $(".dropdown-parent").css("display", "block");
  });
});

answered Aug 01 '19 at 07:58

Adam Kosmala

925
6
9

Thanks! I was stuck for hours on this... – Emmanuel Richman Aug 01 '19 at 08:03
happenes to all of us sometimes :) – Adam Kosmala Aug 01 '19 at 08:03

score 0 · Answer 2 · answered Aug 01 '19 at 07:57

0

The CSS can not work, because .dropdown-parent is not a child of the list-item

The JS approach doesn't work because both the selectors are wrong (a dot . is missing, those are classnames and not elements)

$(document).ready(function(){
  $(".header-nav li").hover(function(){
    $(".dropdown-parent").css("display", "block");
  });
});

answered Aug 01 '19 at 07:57

Fabrizio Calderan

120,726
26
164
177

Thanks a lot! Hopefully with more experience I will avoid such mistakes! – Emmanuel Richman Aug 01 '19 at 08:01

Change "display:none" to "display:block" with on hover doesn't work

2 Answers2