CODEWITHSUNDEEP
javascript
kevin richard
kevin richard

Reputation: 91

change color of text, image and background on hover

I want to change color of the image too on hover by applying a filter: brightness(10) but it's whiting all the button, so I don't know how to change the icon color.

button hover

for example you can use

<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>

Upvotes: 1

Views: 890

Answers (2)

Robin270
Robin270

Reputation: 73

I recommand you to create a second image file and on hover change the image src attribute using JavaScript to the brighter file. It also allows you to be more creative than just increasing the brightness value.

It's a simple task, but I'll rather explain it detail. It seems, that you have dealt with the basic CSS hover effects with no problem, so I'll just show you the JavaScript.

Your HTML looks probably like this (i added a class to the img and linked the JavaScript):

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

Now, you want to change the attribute src="" of the <img> tag, when hovering over the whole <div>. And when the mouse is no longer hovering over the <div>, you want to set it to the default.

You'll need to use the addEventListener() and setAttribute() functions.

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');
});

Upvotes: 0

Wais Kamal
Wais Kamal

Reputation: 6180

Add a filter to the image only:

.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>

Upvotes: 1

Related Questions