显示器:块不起作用，淹没显示器:上面没有

Question

我是html css的新手，这是我的问题

这是我的代码

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

正如你在我的主css中看到的，

我写的代码像这个

.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 100%;
padding: 8px;
display: none;
}
.header__navbar-item--has-qr:hover .header_qr {
display: block;
}

我的目的是隐藏qr码，当我将鼠标悬停在header_navbar-item--has qr时，它将通过代码显示显示qr码：block。

但它并没有像我预期的那样显示qr码。

你能为这个问题给我一些建议吗？提前谢谢。

Answer 1

在您的代码中有2个问题

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

这里使用类名header_navbar-item--有qr，但html文件中不存在。您应该使用header_navbar-item--单独，而不是header_navbar-item--具有qr

另一个是声明类名header_qr这个名称在html文件中不存在。在这里，您应该使用header_qr而不是

header_qr用此代码替换您的代码。它应该工作

.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 100%;
padding: 8px;
display: none;
}
.header__navbar-item--separate:hover .header__qr {
display: block;
}