我对编程非常陌生.我正在写我的第一个Kirby网站.我有一个固定的顶栏和一个可滚动的 gallery .我试着让我的图像在悬停时呈现黑白.这是可行的，但出于某些原因--当鼠标悬停在图像上时--图像会突然重叠在固定的顶栏上.为什么会发生这种情况，我能做些什么？
我试着用z-index解决这个问题，但没有奏效.也许我的css太乱了？就像我说的--我才刚刚起步，通过反复试验做了很多事情.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?></title>
<?= css('index.css') ?>
</head>
</head>
<body>
<header>
<div class="left">
<div class="fixed">
<div class="logo">
<a href="<?= $site->url() ?>"><?= $site->title() ?></a>
<a class="sublogo"> Sound Design | Composing | Post Produktion </a>
</div>
</div>
</div>
</header>
<div class="flexbox">
<div class="left">
<div class="fixed">
<nav class="menu" id="menu" >
<?php
// get the first set of subpages which should be used
$subpages = $pages->find('projects')->children();
// create the snippet beginning with those subpages
snippet('treemenu', ['subpages' => $subpages]);
?>
</nav>
<nav class="menu" id="menu2" >
<?php foreach ($site->children()->listed() as $subpage): ?>
<a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
<?php endforeach ?>
</nav>
</div>
</div>
<div class="right">
<ul class="projects">
<?php foreach ($page->children()->listed() as $project): ?>
<li>
<div>
<a href="<?= $project->url() ?>">
<?= $project->image()->crop(500) ?>
</a>
</div>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
</body>
</body>
</body>
</html>
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
html {
height: 100%;
overflow: hidden;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
body {
background-color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
word-wrap: break-word;
overflow: auto;
}
a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/*Helps With Images*/
img, video {
width:100%;
height:auto;
}
img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
li {
list-style-type: none;
}
.logo {
background-color: white;
overflow: hidden;
position: fixed;
float: left;
display: block;
padding-top: 3%;
top: 0;
padding-bottom: 3%;
width: 100%;
margin: 0% 1%;
font-size: 18px;
font-weight: bold;
/* border-bottom: 0.125vw solid #000000; */
}
.sublogo {
flex-basis: auto;
margin-left: 85px;
font-size: 18px;
font-weight: normal;
}
.menu {
line-height: 150%;
font-size: 16px;
color: black;
}
#menu {
/* text-decoration: underline; */
width: 70%;
margin: 0% 5%;
}
#menu2 {
width: 5%;
margin-bottom: 30px;
margin-left : 15px;
position: fixed;
bottom: 0;
}
a:hover {
font-style: italic;
text-decoration: underline;
}
a.logo:hover {
font-style: normal;
text-decoration: none;
}
a.sublogo:hover {
font-style: normal;
text-decoration: none;
}
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
width: 95%;
grid-gap: 0.2rem;
margin-top: 3.5%;
margin-left: 11%;
}
ul.gallery {
width: 80%;
padding: 0% 10% 0% 10%;
}
.flexbox {
display: flex;
width: 100%;
height: 100vh;
}
.left {
flex-basis: auto;
width: 12%;
padding: 2rem;
/* border-right: 0.125vw solid #a6a6a6; */
}
.right {
width: 80%;
}
.fixed {
position: fixed;
}