display : block does not working to overwhelm the display : none above?

Question

I am newbie with html css and here is my problem

Here is my code

https://github.com/anhquanjp/109headerqrcodecss

As you can see in my main css,

I wrote the code like this

    .header__qr {
    width: 190px;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 8px;
    display: none;
}

.header__navbar-item--has-qr:hover .header_qr {
    display: block;
}

My purpose is to hide the qr code and when I hover the mouse to header__navbar-item--has-qr, it will show the qr code by the code display: block.

But it does not show the qr code as I expect.

Could you please give me some advice for this problem ? Thank you in advance.

Answer 1

In your code there is 2 problem

.header__navbar-item--has-qr:hover .header_qr {
    display: block;
}

Here you use class name header__navbar-item--has-qr but this is not exists in html file. You should use header__navbar-item--separate instead of header__navbar-item--has-qr

And another on is you declare class name header_qr this name is not also exists in html file. Here you should use header__qr instead of header_qr.

Replace your code with this one. It should work

.header__qr {
    width: 190px;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 8px;
    display: none;
}

.header__navbar-item--separate:hover .header__qr {
    display: block;
}