How to change color of a border-color and text color on hover

[Ultimate]

I had figured it out with one discrepancy.. when I hover on the text it doesn't change the border-color.. but it's ok the other way round.

<style type="text/css">
a{color:#D4AF37;text-decoration:none}
img.highlight{border:1px #D4AF37 solid;height:20vw;width:19vw}
img.highlight:hover{border-color:white}
.highlight2:hover{color:white}
</style>

<div style="text-align:center">
<img src="https://www.boxingworld.news/core/css/0/0/2/8/6/3/images/boxingworldpromotionslogo.webp"style="width:50%">
<div style="color:#D4AF37;cursor:default;font-family:tahoma;font-size:1.5vw;text-align:center">
<a href="http:/www.wikipedia.org/wiki/Oleksandr_Usyk_vs._Daniel_Dubois"class="highlight2"target="_blank">#1<br><img src="https://www.boxingworld.news/core/css/0/0/2/8/6/3/images/usykdubois.webp"class="highlight"><br>19-Jul-2025</a>
</div>
</div>

www.boxingworld.news/events

 

[tomliv]

.highlight2:hover img{border-color: white;}

 

[Ultimate]

Once again.. thanks..


Solved..

 

[tomliv]

.highlight2:hover img{border-color: white;}

@Ultimate I should have mentioned that you won't need the img.highlight:hover style anymore after adding the above

 

[Ultimate]

Great.. one last thing.. ever since I used more specificity with the img.classname it seems to have given the image a background color.


When I use the inline CSS before it didn't have this background color.. is there a way to get rid of this without using javascript.


I know you can do it with onmouseover and stuff but..


By background color I mean when the image hasn't loaded yet it's just a blank box.. but ever since img. it's made the entire box the color of the border if that makes sense.

 

[tomliv]

Great.. one last thing.. ever since I used more specificity with the img.classname it seems to have given the image a background color.


When I use the inline CSS before it didn't have this background color.. is there a way to get rid of this without using javascript.


I know you can do it with onmouseover and stuff but..


By background color I mean when the image hasn't loaded yet it's just a blank box.. but ever since img. it's made the entire box the color of the border if that makes sense.

It's because of this rule:

.highlight {
background-color: #D4AF37;
}

You can remove the class from this image and that will solve the problem. Or remove that CSS rule, if you aren't using it anywhere else.

(browser dev-tools are your friend! 🙂 )

 

[Ultimate]

Once again thanks..