Soy novato con html css y aquí está mi problema.
Aquí está mi código
https://github.com/anhquanjp/109headerqrcodecssComo puedes ver en mi css principal,
Escribí el código así
.header__qr { width: 190px; position: absolute; left: 0; top: 100%; padding: 8px; display: none; } .header__navbar-item--has-qr:hover .header_qr { display: block; }Mi propósito es ocultar el código qr y cuando paso el mouse sobre header__navbar-item--has-qr, mostrará el código qr en la pantalla de código: bloque.
Pero no muestra el código qr como esperaba.
¿Podría darme algún consejo para este problema? Gracias de antemano.
En tu código hay 2 problemas.
.header__navbar-item--has-qr:hover .header_qr { display: block; }Aquí usa el nombre de clase header__navbar-item--has-qr pero esto no existe en el archivo html. Debe usar header__navbar-item--separate en lugar de header__navbar-item--has-qr
Y otro es que declare el nombre de la clase header_qr, este nombre tampoco existe en el archivo html. Aquí debe usar header__qr en lugar de header_qr .
Reemplace su código con este. Deberia de funcionar
.header__qr { width: 190px; position: absolute; left: 0; top: 100%; padding: 8px; display: none; } .header__navbar-item--separate:hover .header__qr { display: block; }