У меня проблема с заголовком. Я хочу использовать фильтр серой шкалы при наведении, но по какой-то причине фильтр серой шкалы имеет большее значение, чем моя панель навигации hover li. Я искал, но ни у кого не было этой проблемы :(, я хочу видеть зависший ли. Я знаю, что фильтры используются в камбузе, и я использовал раньше, но я не видел эту проблему до сих пор. Как я могу решить эту проблему?
$("button").click(function() {
$(".main-header").toggleClass("grey");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
margin-top: 9px;
display: block;
position: absolute;
}
.child {
float: left;
width: 200px;
height: 50px;
background-color: rgb(224, 224, 224);
line-height: 40px;
text-align: center;
font-size: 20px;
position: relative;
}
.navbar {
background-color: rgb(224, 224, 224);
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
list-style: none;
}
li:hover {
background-color: rgb(192, 190, 190);
transition: all 0.4s ease 0s;
}
.parent {
margin-top: 9px;
display: block;
position: absolute;
}
.parent li {
display: none;
}
.child:hover .parent li {
display: block;
}
.main-header {
background-color: chartreuse;
padding: 50px 0;
padding-bottom: 10%;
}
.grey {
filter: grayscale(100%);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href='styles.css'>
</head>
<!-- header -->
<body>
<!-- navbar -->
<ul class="navbar">
<li class="child"><a href="#">About</a>
<ul class="parent">
<li class="child"><a href="">Our Team</a></li>
<li class="child"><a href="">Camp Sites</a></li>
<li class=" child"><a href="">Resources</a></li>
</ul>
</li>
<li class="child"><a href="#">Things to do</a>
<ul class="parent">
<li class="child"><a href="">Activities</a></li>
<li class="child"><a href="">Parks</a></li>
<li class="child"><a href="">Shops</a></li>
<li class=" child"><a href="">Events</a></li>
</ul>
</li>
</ul>
<!-- header -->
<div class='main-header'>
<button>click to turn grey</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>