html - 网页上的悬停效果覆盖下拉导航栏
问题描述
我有一个使用纯 html 和 CSS(还没有 JavaScript)的网页。该网页包含一个简单的固定位置标题,每个类别都有悬停下拉菜单。网页内容本身排列在“图块”中,在悬停时会产生效果以强调它们(并链接到其他页面)。我将附上一张图片以更好地解释。下拉菜单在网页的最顶部可以正常工作,但是如果下拉菜单落在其中一个图块的顶部,则下拉菜单将消失并触发图块悬停效果。
我确保下拉列表的所有部分的 z-index 都大于图块。
下拉 HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
<a href="catagory1.html" class="dropdown-head">catagory1</a>
<div class="dropdown-content">
<a href="../content1.html">content1</a>
<a href="/content2.html">content2</a>
<a href="../content3.html">content3</a>
</div>
</li>
<li class="dropdown">
<a href="catagory2.html">catagory2</a>
<div class="dropdown-content">
<a href="content4">content4</a>
<a href="content5.html">content5</a>
</div>
</li>
</ul>
</nav>
页面内容 HTML(单个图块的示例,代码重复):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
相关CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
图 1: 页面顶部(工作正常) 图 2: 向下滚动(将鼠标悬停在内容 3 上将关闭下拉菜单)
无论是否触发悬停效果,我都希望下拉菜单保持在图块顶部。我不确定这是否需要 JavaScript。任何帮助表示赞赏!
编辑:添加片段
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
<a href="cat1.html" class="dropdown-head">Catagory1</a>
<div class="dropdown-content">
<a href="cont1.html">content1</a>
<a href="cont2.html">content2</a>
<a href="content3.html">content3</a>
</div>
</li>
<li class="dropdown">
<a href="cat2.html">Catagory2</a>
<div class="dropdown-content">
<a href="content4.html">content4</a>
<a href="content5.html">content5</a>
</div>
</li>
<li><a href="cat3">Catagory3</a></li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
您的悬停效果仅适用于 a,这意味着当鼠标不在实际链接上时它会失去效果。将悬停应用到 li 上,这样它就会正确覆盖它。
a:not(p):hover { 颜色: #38b6ff; }
改用这个。
李:悬停{颜色:#38b6ff;}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
<a href="cat1.html" class="dropdown-head">Catagory1</a>
<div class="dropdown-content">
<a href="cont1.html">content1</a>
<a href="cont2.html">content2</a>
<a href="content3.html">content3</a>
</div>
</li>
<li class="dropdown">
<a href="cat2.html">Catagory2</a>
<div class="dropdown-content">
<a href="content4.html">content4</a>
<a href="content5.html">content5</a>
</div>
</li>
<li><a href="cat3">Catagory3</a></li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- r - 根据 R 中的条件填充列
- javascript - 我无法在 JavaScript 中实现 forEach 循环
- python - 如何使用 python pandas 在本地系统 Jupyter Notebook 中读取两个较大的 5GB csv 文件?如何在本地加入两个数据框进行数据分析?
- javascript - UnhandledPromiseRejectionWarning:导出打字稿文件时找不到函数
- azure-devops - 如何在 Azure DevOps Services 中调用迭代 API 查询
- tomcat - URL 重写在 Apache Tomcat 9.0.30 版本中不起作用。为什么?
- excel - 具有命名范围的多个间接
- python - 使用 python3 解析嵌套 JSON - 获取 KeyError,您能否指导?
- c++ - C ++中dlsym的未定义符号
- jquery - 如何将函数传递给jquery ui选项卡的活动选项?