在 hover 上更改文本、圖像和背景的顏色

Question

我也想通過應用過濾器來更改 hover 上的圖像顏色：亮度（10），但它會顯示所有按鈕，所以我不知道如何更改圖標顏色。

例如你可以使用

 <div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div> <style>.hello {background-color: #eeeeee;color: #4171af;font-size: 20px}.hello:hover{background-color: #4171af; color: white;} </style>

Answer 1

僅向圖像添加過濾器：

 .hello { background-color: #eeeeee; color: #4171af; font-size: 20px }.hello:hover { background-color: #4171af; color: white; }.hello:hover img { filter: brightness(150%); }

 <div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>

Answer 2

我建議您創建第二個圖像文件，並在 hover 上使用 JavaScript 將圖像 src 屬性更改為更亮的文件。 它還可以讓您更有創意，而不僅僅是增加亮度值。

這是一個簡單的任務，但我寧願詳細解釋它。 看來，您已經毫無問題地處理了基本的 CSS hover 效果，所以我只向您展示 JavaScript。

您的 HTML 看起來可能像這樣（我在img中添加了class並鏈接了 JavaScript）：

<div class="hello">
    <img class="play" src="https://i.ibb.co/HBbfCGF/play.png">
    <span>Button</span>
</div>
<script src="script.js"></script>

現在，當您將鼠標懸停在整個<div>上時，您想更改<img>標記的屬性src="" 。 當鼠標不再懸停在<div>上時，您希望將其設置為默認值。

您需要使用 addEventListener() 和 setAttribute() 函數。

let hello = document.querySelector('.hello');
hello.addEventListener('mouseover', function(){
   let img = document.querySelector('.play');
   img.setAttribute('img', 'path/to/the/second/file.png');
});
hello.addEventListener('mouseout', function(){
   let img = document.querySelector('.play');
   img.setAttribute('img', 'https://i.ibb.co/HBbfCGF/play.png');
});