Avatar of Brad Bansner
Brad Bansner
 asked on

How to style a link with CSS to change border color of image, but not add border around text?

I have CSS like this:

.videothumb{border:2px solid #2e2e2d;padding:4px;}
a.videolink,a.videolink:visited{color:#7d7c7b;text-decoration:none;}
a.videolink:hover{color:#7d7c7b;text-decoration:underline;border:2px solid #676765;}

Open in new window


My HTML link looks like this:

<a href="#"><img class="videothumb" src="img/img.jpg"><br />
Some text here</a>

Open in new window


So, I want a hover event to change the color of the border around the image but not add a border around the text part of the link, which is what it is doing currently.

I had also tried this:

.videothumb:hover{border:2px solid #676765}

Open in new window


That worked nicely for the image, but if you took the mouse off the image and just on the text part of the link, the border highlight would go away.

There must be some compromise between these two methods that will do what I want? Thank you!
CSS

Avatar of undefined
Last Comment
Brad Bansner

8/22/2022 - Mon
Kyle Hamilton

give the link a class:
<a href="#" class="thumblink"><img class="videothumb" src="img/img.jpg"><br />
Some text here</a>

Open in new window


then in css:
.thumblink:hover .videothumb{border:2px solid #676765}

Open in new window




is this what you're looking for?
Brad Bansner

ASKER
That didn't quite do it. Lets make this easier, here is my test page:
http://www.partnersdesign.net/lieverhymanpotter/videos.php

Here is the HTML and CSS I tried adding, based on your suggestion:

.videolink:hover{
		.videothumb{border:2px solid #676765;}
	}

<a class="videolink" href="videos.php?v=1"><img class="videothumb videospaceright" src="img/gr_video-1.jpg" width="149" height="84" border="0" /><br />
				John Badal speaks...</a>

Open in new window

ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Brad Bansner

ASKER
Perfect, thanks!
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck