Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 843
  • Last Modified:

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!
0
bbdesign
Asked:
bbdesign
  • 2
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
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?
0
 
bbdesignAuthor Commented:
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

0
 
Kyle HamiltonData ScientistCommented:
your style rule revised. it was incorrect.

.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>
0
 
bbdesignAuthor Commented:
Perfect, thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now