У меня есть два блока - родитель и ребенок. При наведении родительского блока измените оттенки серого. Как я могу сохранить дочерний элемент с зеленым цветом при наведении (не серый, а зеленый)?

<style>
.parent {
   color:red
   width: 100px;
   height: 100px;
}
.child {
   color: green
   width: 50px;
   height: 50px;
}
.parent:hover {
   filter: grayscale(100%)
}
</style>

<div class="parent">
   <div class="child">
   </div>
</div>