CODEWITHSUNDEEP
htmlcss
Piccolo
Piccolo

Reputation: 1666

Change CSS border colors with links

I'm trying to get the border around my links to change color with the links. I have it set so a.hover changes the color slightly and wanted to make it change the border color also. Is it possible to do this using just CSS and HTML?

This is my HTML code:

<h1>
    <a class="border" href="http://example.com">Home</a>
    <a class="border" href="http://example.com/forum">Forum</a>
</h1>

and this is my CSS:

h1 {
text-align: center;
color:#00F;

}
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00F;
}
a:hover {
text-decoration: none;
color: #006;
}
a:active {
text-decoration: none;
color: #000;
}
a.border {
border-style: solid;
border-color: #00F;
border-width: 5px;
}

Upvotes: 1

Views: 12169

Answers (6)

alf_red
alf_red

Reputation: 122

I clean the code:

<h1>
    <a href="http://example.com">Home</a>
    <a href="http://example.com/forum">Forum</a>
</h1>​

    h1 {
  text-align: center;
  color:#00F;
}
a:link, a:visited {
  color: #00F;
  text-decoration: none;
  border: 5px solid #00F;
}
a:hover {
  text-decoration: none;
  color: #006;
  border: 5px solid #006;
}
a:active {
  text-decoration: none;
  color: #000;
  border: 5px solid #000;
}​

Use Border and I've delete class in tag html.

http://jsfiddle.net/SUMEk/

Upvotes: 3

Wallace Sidhr&#233;e
Wallace Sidhr&#233;e

Reputation: 11597

The only thing you need is this:

a.border:hover {
    border-color: red;
}

The other styles are already inherited.

Upvotes: 2

joequincy
joequincy

Reputation: 1395

a.border:hover{
    border-color: #006; /*Or whatever*/
}

I'd advise reading up on http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Upvotes: 1

daniel
daniel

Reputation: 1433

You're looking to add border: 5px solid #000000; inside your a:hover{} I think

  • This won't work unless you remove the border class on your <a> tag or add the above inside a.border:hover{} - read the comments for an explanation.

Upvotes: 2

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

You are looking for the css property "border". The following code will add a border when you hover:

a.border:hover {
    text-decoration: none;
    color: #006;
    border-style: solid;
    border-color: red;
    border-width: 5px;
}

Your a.border was more specific than your a:hover selecter. Therefore you wouldn't see a border.

JS fiddle: http://jsfiddle.net/vJ2fJ/2/

Upvotes: 2

Rafael Cavalcante
Rafael Cavalcante

Reputation: 417

Use the ":hover" pseudo selector if you want the style to change when the user pass the mouse over your item. Your CSS should be like this:

a:hover {
    border:5px solid #00F;
}

When you hover any link you'll se the effect.

Upvotes: 1

Related Questions