Jump to content

hyperlink roll over...


ilikephp

Recommended Posts

hello,

 

I have this code:

 

a {

 

font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #990000;

  text-decoration: none; font-weight: bold

 

}

 

a:hover {

 

font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #990000;

text-decoration: underline; font-weight: bold

}

 

 

How can I choose which color to be displayed for some links when the mouse is rolled over them?

 

For example:

 

read more: will be displayed in red and bold

 

and if I want:

continue: to be in blue when clicked, what can I do plz?

 

Thxx...

Link to comment
https://forums.phpfreaks.com/topic/109295-hyperlink-roll-over/
Share on other sites

1. This is not a JavaScript questin it is a CSS question.

 

2. You do not need to specify properties in the "a:hover" option if they are the same in the standard "a" class.

 

You just need to use named classes to achieve this

 

Example:

<html>
<head>
<style>

a { 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold 
}

a:hover { 
  text-decoration: underline;
}

.red {
  color: #990000; 
}

.blue {
  color: #000099; 
}

</style>
</head>

<body>

<a href="#" class="red">Link 1</a><br>
<a href="#" class="blue">Link 2</a><br>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/109295-hyperlink-roll-over/#findComment-560647
Share on other sites

hi again!!

 

in this fuction below, can I add a color for "a" so the hyperlink will be taken automatically?

 

a {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 14px;

  text-decoration: none;

  font-weight: bold

}

 

for example:

can hover take the color that is put by default?

can I put this without the class?

 

<a href="#" >Link 1</a><br>

Link to comment
https://forums.phpfreaks.com/topic/109295-hyperlink-roll-over/#findComment-565457
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.