links

  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Help Please. :)

I want to have it that when the mouse goes over the links a line appears over & under them.

I am not figuring it out lol.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • dr nick
  • Proficient
  • Proficient
  • dr nick
  • Posts: 263
  • Loc: Frankfurt

Post 3+ Months Ago

This is achievable using CSS code, put the following into a .css file:


Quote:
A:hover {
COLOR: #0066ff; BACKGROUND-COLOR: #ecf6ff; TEXT-DECORATION: underline overline
}


And that should put both an overline and underline when your mouse moves over a link.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Thank you :)
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

ok but small problem, is there a way to do that but also have it so there is no line under the links until you do the mouse over?

Because before I had it with no underline, and if I try to add it now it won't show any lines at all?

lol sorry :)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Add these two to the same CSS file the hover dr nick showed you is in:
Code: [ Select ]
A:link {
COLOR: #0066ff; BACKGROUND-COLOR: #ecf6ff; TEXT-DECORATION: none
}
A:visited {
COLOR: #0066ff; BACKGROUND-COLOR: #ecf6ff; TEXT-DECORATION: none
}
  1. A:link {
  2. COLOR: #0066ff; BACKGROUND-COLOR: #ecf6ff; TEXT-DECORATION: none
  3. }
  4. A:visited {
  5. COLOR: #0066ff; BACKGROUND-COLOR: #ecf6ff; TEXT-DECORATION: none
  6. }


Change colors as you like.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

umm that didn't work ;(

All it did was cause the background color to be there without a mouse over, with no lines and nothing changes at all now.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

nm thank you guys so much :) I figured it out.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Good for you. Glad you got it. We'd be curious to see your final code on what worked. We always encourage posters to include their solutions when they figure out a problem on their own so that future viewers can get the solution without having to ask again. Thanks!
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

:) I am actually not sure why it didn't work before when I did it lol. It seems the same, maybe I did it wrong before lol. But here it is-

Code: [ Select ]
A:link{color:663399;text-decoration:none}
A:visited{color:660066;text-decoration:none}
A:active{color:663399;text-decoration:none}
A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}
  1. A:link{color:663399;text-decoration:none}
  2. A:visited{color:660066;text-decoration:none}
  3. A:active{color:663399;text-decoration:none}
  4. A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}


Thanks though you all were very helpful.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Looks good - thanks
  • schmeg007
  • Novice
  • Novice
  • schmeg007
  • Posts: 30

Post 3+ Months Ago

Just to save yourself some typing you can combine the similar states into one, like changing this:
Code: [ Select ]
A:link{color:663399;text-decoration:none}
A:visited{color:660066;text-decoration:none}
A:active{color:663399;text-decoration:none}
A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}
  1. A:link{color:663399;text-decoration:none}
  2. A:visited{color:660066;text-decoration:none}
  3. A:active{color:663399;text-decoration:none}
  4. A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}


into this:
Code: [ Select ]
A:link, a:active {color:663399;text-decoration:none}
A:visited{color:660066;text-decoration:none}
A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}
  1. A:link, a:active {color:663399;text-decoration:none}
  2. A:visited{color:660066;text-decoration:none}
  3. A:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}


and if you wanted link, active, and visited to be the same look you could minimize it down to this:
Code: [ Select ]
a:link, a:active, a:visited {color:663399;text-decoration:none}
a:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}
  1. a:link, a:active, a:visited {color:663399;text-decoration:none}
  2. a:hover{color:0066ff;text-decoration:underline overline;background-color:#ecf6ff}

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 55 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.