Member Avatar for Mr.Furious

Here is a current page I am working on I would like to change the color of the borders on my image links but cant seem to figure it out on my own. I'm sure its something easy that I am messing up. To do this with text, i would use something like this.

a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #D00000;
}
a:active {
	color: #000000;
}

Can anyone help point me in the right direction? thanks

  • 3 Contributors
  • 2 Replies
  • 111 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

wanted the image-link borders to change color on hover; saw Firefox doing that but noted IE6 failed. A reliable cross‑browser pattern is to put the visible border on the anchor that wraps the image, remove the browser default image border, and let the anchor handle :hover. That avoids IE6 quirks (historically :hover only worked predictably on anchors) and keeps the border tight around the image.

Try this approach (attach the class to the <a> that wraps the <img>):

/* border on the link, image inside is borderless */
a.image-link {
  display: inline-block;
  border: 2px solid #000000;
  text-decoration: none;
}

a.image-link img {
  display: block;
  border: none;
}

/* change the border color on hover */
a.image-link:hover {
  border-color: #D00000;
}

/* legacy tweak: ensure hasLayout in old IE */
a.image-link { zoom: 1; }

Notes and troubleshooting:

  • The display:inline-block on the anchor makes the border wrap the image; img { display:block } removes the inline gap so the border hugs the image.
  • Remove any default linked-image border with a img { border: none } (some browsers add it).
  • If Bootstrap or a reset is present, check for competing rules (e.g., img or .img-responsive) and use specificity rather than !important.
  • For historical context about the :hover pseudo-class and browser support, see MDN: :hover and the display property: https://developer.mozilla.org/en-US/docs/Web/CSS/display.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

They seem to be working, for me, in FireFox. When I rollover, the black border turns red.

To answer your question, though, give all images the same class, with the CSS looking something like this:

.myImages {border:1px; border-thickness: 1px; border-color: #000; border-style: solid;}

Then, you can use CSS to cascade that definition to hyperlinks:

a:hover, a:active {color: #fff;}

a:hover .myImages,
a:active .myImages {border:1px; border-thickness: 1px; border-color: #fff; border-style: solid;}

Now, the border of your image links will turn red on hover or active.

Member Avatar for peter_budo

It does work in FireFox but IE6 doesn't like it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.