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.
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;
}