css - 想要在悬停我的大型下拉菜单时添加转换延迟
问题描述
我正在尝试在我的下拉菜单上添加转换延迟属性,但它不起作用。我不知道为什么,我还在stackoverflow上搜索了不同的问题,但没有一个对我有用。这是我的代码:
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
我的CSS代码在这里:
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
我的代码的JSbin
我也使用了可见性属性而不是显示,但它对我不起作用。您的回答将大大增加我的知识。提前致谢。
解决方案
您的代码中没有任何动画/过渡。如您所知,您无法为display属性设置动画。而是使用动画:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/* addition to your existing code */
opacity: 0;
visibility: hidden;
transition: opacity 500ms, visibility 500ms;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
/* addition to your existing code */
visibility: visible;
opacity: 1;
animation: fade 1s;
}
/* addition to your existing code */
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- postgresql - 在 Postgres 中设置变量
- node.js - 如何使用特定数据创建 .json 文件?
- php - 无法加载动态库 'php_wincache.dll'
- php - PHP时间没有正确转换/保存
- java - 正在运行 .jar 文件,但 .exe 文件显示错误“此应用程序需要 Java 运行时环境 1.8(64 位)”
- tensorflow - Tensorflow 2.0 - 大数据集的 tf.estimator.DNNClassifier 训练
- android - 迁移到 Here SDK v3.15 后面临“WorkManager 未正确初始化”
- php - 在 PHP 中的 HTML 中的 PHP
- c# - Fluent API 一对多映射,没有导航属性
- android - 来自签名证书、上传证书和调试证书的 SHA1 指纹(Firebase)