如何解决悬停时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.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>
解决方法
您会在闪烁中看到的是浏览器下载和呈现HTML以及下载解释和应用CSS的时间。
根据计算机的速度,用户可能会看到也可能不会看到您所描述的同一工件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。