图片菜单 - 使当前页面脱颖而出

Question

我希望我们网站上的菜单能够清楚地显示您所在的页面。 菜单由 6 张图片组成，我让鼠标悬停时增加其亮度。 我还根据屏幕宽度将图片缩小到手机上。

我希望菜单中的其他 5 张图片是黑白的，或者比您当前所在页面的饱和度更低。

这可能吗？我看到一篇使用列表功能的帖子，用于文本菜单，但我没有成功使其工作。

菜单图片仅供参考

我使用的代码如下：

@media (max-width:629px) {
  img#optionalstuff {
    display: none;
  }
}
@media (min-width:630px) {
  img#mobilestuff {
    display: none;
  }
}

<style>
 .image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
    
.image5:hover {
-webkit-filter: brightness(1.17);

}

</style>

<div class="uk-grid-column-small uk-grid-column-collapse uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center" uk-grid>
    <div>
        <div ><a href="https://webercooling.com/nl/vacuum-koeler-voor-brood-bakkerij"><img class="image5" id="optionalstuff" src="https://iili.io/HgqonS.png" alt="Brood & Bakkerij vacuum cooling" height="652" width="668"></a></div>
		<div ><a href="https://webercooling.com/nl/vacuum-koeler-voor-brood-bakkerij"><img class="image5" id="mobilestuff" src="https://webercooling.com/images/Carrouselmenu/NL/mob_broodbakkerij.png" alt="Brood & Bakkerij vacuum cooling" height="652" width="668"></a></div>
    </div>
    <div>
        <div><a href="https://webercooling.com/nl/industriele-koeltechniek-voor-de-professionele-keuken"><img class="image5" id="optionalstuff" img src="https://iili.io/HUmKyF.png" alt="Koeltechniek voor de keuken" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/industriele-koeltechniek-voor-de-professionele-keuken"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_voedselkeuken.png" alt="Koeltechniek voor de keuken" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-sushi-rijst"><img class="image5" id="optionalstuff" img src="https://iili.io/HUmFv1.png" alt="Vacuum cooler voor rijst" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-sushi-rijst"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_sushirijst.png" alt="Vacuum cooler voor rijst" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-groenten-en-kruiden"><img class="image5" id="optionalstuff" img src="https://iili.io/Hg93a2.png" alt="Groenten en kruiden vacuum cooling" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-groenten-en-kruiden"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_groentenkruiden.png" alt="Groenten en kruiden vacuum cooling" height="652" width="668"></a></div>    
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/cold-chain-management-voor-bloemen"><img class="image5" id="optionalstuff" img src="https://iili.io/Hg9J44.png" alt="Bloemen en koudeketen" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/cold-chain-management-voor-bloemen"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_bloemenkoudeketen.png" alt="Bloemen en koudeketen" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-turf-compost"><img class="image5" id="optionalstuff" img src="https://iili.io/HgdDlf.png" alt="Turf en compost koeling" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-turf-compost"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_grascompost.png" alt="Turf en compost koeling" height="652" width="668"></a></div>
	</div>
</div>

提前感谢您的帮助！

亲切的问候， 乔伊

Answer 1

` 一个图像{ -webkit-filter：亮度（50%） }

a:活动图片，a:访问过的图片{ -webkit-filter：亮度（1）； }`