#html #css #dropdown #flicker
#HTML #css #выпадающий #мерцание
Вопрос:
Я изучаю HTML и CSS, и я пытался создать кнопку меню с выпадающим списком других пунктов меню, отображаемых при наведении. Он работает нормально, но есть одна вещь, которая, на мой взгляд, неверна. И это факт, что это выпадающее меню отображается на полсекунды после каждой перезагрузки / обновления страницы. Может кто-нибудь, пожалуйста, помочь и проверить, что не так в коде, который я пытался использовать?
Заранее большое вам спасибо. Ниже приведен мой код HTML и CSS.
body{
background-color: tomato;
height: 100vh;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.logo{
float:left;
font-family: arial;
}
.logo h2{
color:#fff;s
}
.menu_button{
background-color: transparent;
color:#fff;
padding:15px;
font-size:15px;
cursor: pointer;
border: 1px solid #fff;
width: 100px;
}
.right_menu{
position:relative;
display: inline-block;
float: right;
}
.dropdown_menu{
visibility: hidden;
text-align: center;
position: absolute;
background-color: #f9f9f9;
width: 100px;
box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: .3s;
}
.dropdown_menu a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_menu a:hover{
background-color: #000;
color:#fff;
transition: .3s;
}
.right_menu:hover .dropdown_menu{
visibility: visible;
opacity: 1;
transition: .4s;
} <!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Hello world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetStyle.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<h2>LOGO</h2>
</div>
<div class="right_menu">
<button class="menu_button">Menu</button>
<div class="dropdown_menu">
<a href="index.html">Home</a>
<a href="#">About us</a>
<a href="contacts.html">Contacts</a>
</div>
</div>
</div>
</body>
</html> Комментарии:
1. Я не могу воспроизвести эту проблему на своей собственной машине, и я не вижу ничего плохого в коде (кроме случайного символа в конце одного из ваших правил стиля, но это не должно быть причиной). Кроме того, ваш код импортирует таблицу стилей сброса, которая, я не уверен, является частью вашего отправленного кода. (Сброс, вероятно, следует импортировать перед вашими стилями). Чтобы получить более точные ответы, вы также должны указать, в каком браузере появляется проблема.
2. Спасибо, извините за эту строку, импортирующую таблицу стилей сброса, она больше не является частью кода, у меня нет таблицы стилей сброса в моей корневой папке (это была просто старая часть кода), поэтому строка в html в настоящее время ничего не должна делать… Также извините, что не упомянул браузер, и, как я упоминал в комментарии ниже, проблема возникает только в Chrome или Microsoft Edge, Firefox и IE не мерцают…
3. Боюсь, что единственная полезная вещь, которую я могу сказать, это то, что он работает, когда я воспроизводю его на своем Mac с помощью Chrome, Firefox и Safari, и, как я уже сказал, код выглядит разумным для меня. Я бы посоветовал попробовать это на другом устройстве, если сможете.
Ответ №1:
То, что вы видите при этом мерцании, — это время, между которым браузер загрузил и отобразил HTML, а также загрузил, интерпретировал и применил CSS.
В зависимости от скорости своего компьютера пользователь может видеть или не видеть тот же артефакт, который вы описываете.
Комментарии:
1. Спасибо вам обоим. Сейчас я работаю на своем игровом ПК, который работает достаточно быстро, поэтому скорость Интернета или ПК не должна быть проблемой. Извините, я забыл упомянуть браузер… На самом деле, он не мерцает в Firefox и Internet Explorer, и проблема возникает при отображении страницы в Chrome или Microsoft edge.