change colour of text, on hover.

Jason3107 · #1 Sep 27th, 2007, 03:28

i have the following code..

h1 {
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    color: black;
    margin: 0 0;
    padding: 5;
}

which i use with.

Code: Select all

<a href="somepage.html" target="_blank"><h1>some text</h1></a>

i wish to have the link in black with no underline and when hovered over it goes white, and the same when page is revisted.

how can this be done.

thanks

Monie · #2 Sep 27th, 2007, 04:25

Code: Select all

<style type="text/css">
<!--
a:link {color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none;}
-->
</style>

The A refers to any link reference. Notice all your links start off as A HREF.

LINK defines the properties for an unvisited link.
VISITED defines the properties for a visitied link.
ACTIVE defines the properties of a currently active link.
HOVER defines the properties when a mouse is over a link.

The A command actually affects ALL the link properties. In this case, text-decoration: none eliminates the underline or border from showing.

Play around with the color.

mcdanielnc89 · #3 Sep 27th, 2007, 04:31

In order to do a hover effect you need to either have the hover command in css and link the css from ur page... Or just place it in tags in your head section.. Couple of examples below...

CSS:

Code: Select all

 
a:hover {
 font-family: Tahoma; 
 font-size: 12px;
 font-style: normal;
 color: #ff0000; 
 text-decoration: underline overline; 
}

Then you need to link that from ur page to it reads the CSS like so:

Code: Select all

<link href="CSS Location" rel="stylesheet" type="text/css">

OR you can just put it in your main page like this:

Code: Select all

<head>
<script>
<!---
a:hover {
 font-family: Tahoma; 
 font-size: 12px;
 font-style: normal;
 color: #ff0000; 
 text-decoration: underline overline; 
}
--->
</script>
</head>

Keep in mind that it really is better if you use all selector ways.. I.E.) a:link, a:active, a:visited, and a:hover

welshstew · #4 Sep 27th, 2007, 07:36

Quote:

Originally Posted by monie

Code: Select all

<style type="text/css">
<!--
a:link {color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none;}
-->
</style>

if you want to add this to the <h1> tag (and not all link text) then you will need to add the following:

Code: Select all

<html><head>
<style type="text/css">
<!--
h1 a:link {color: #0000ff;}
h1 a:visited {color: #ff0000;}
h1 a:active {color: #00FF00;}
h1 a:hover {background-color: #ffffff;}
h1 a {text-decoration: none;}
-->
</style>
</head>
<body>
<h1><a href="foo">text</a></h1>
</body>
</html>

Notice how I have moved the link tag to be inside the <h1>

Stew

Monie · #5 Sep 27th, 2007, 07:57

Yeah, I forgot about that....
Thanks for correcting that one.

Another way is to refer it the parent div element. Let say the link is in your div called "menu",

and you can put the link style in:

Code: Select all

#menu A h1{
       /*your link styles;*/
}

This will apply the style inside the div element "main" only.

Jason3107 · #6 Sep 27th, 2007, 08:33

I have used this method as i seem to understand it more, i am still new to CSS.

I have already used h1 so i changed the h1 in your code to h2 and tried it but did not work

<a href="somelink" target="_blank" class="h2"><h1>some text</h1></a>

the underline is still there and the colours seem to be the same

i have a test file below that i am using.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.container2 {background:#325EAF; margin:0 5px;}
.rtop2, .rbottom2{
display:block;
background:#507BCD;
}
.rtop2 *, .rbottom2 *{
display: block;
height: 1px;
overflow: hidden;
background:#325EAF;
}


.container1 {background:#799BD9; margin:0 5px;}
.rtop1, .rbottom1{
display:block;
background:#507BCD;
}
.rtop1 *, .rbottom1 *{
display: block;
height: 1px;
overflow: hidden;
background:#799BD9;
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}


h1 {
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;
}

h2 a:link {color: #0000ff;}
h2 a:visited {color: #ff0000;}
h2 a:active {color: #00FF00;}
h2 a:hover {background-color: #ffffff;}
h2 a {text-decoration: none;}
-->
</style>


</head>

<body>
<table width="100%">
  <?
            for ($i = 0; $i < 10; $i++) {
            ?>
              <tr><td>
              <div class="<? if( $i & 1 ) { echo('container2'); } else { echo('container1'); } ?>">
                <b class="<? if( $i & 1 ) { echo('rtop2'); } else { echo('rtop1'); } ?>"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
              <a href="?v=<?=$i;?>" target="_blank" class="h2"><h1>text</h1></a>
            <b class="<? if( $i & 1 ) { echo('rbottom2'); } else { echo('rbottom1'); } ?>"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div>
                </td></tr>
            <? } ?>
            </table>
</body>
</html>

Quote:

Originally Posted by welshstew

if you want to add this to the <h1> tag (and not all link text) then you will need to add the following:

Code: Select all

<html><head>
<style type="text/css">
<!--
h1 a:link {color: #0000ff;}
h1 a:visited {color: #ff0000;}
h1 a:active {color: #00FF00;}
h1 a:hover {background-color: #ffffff;}
h1 a {text-decoration: none;}
-->
</style>
</head>
<body>
<h1><a href="foo">text</a></h1>
</body>
</html>

Notice how I have moved the link tag to be inside the <h1>

Stew

welshstew · #7 Sep 27th, 2007, 08:44

h1 is not the div name (class) but the attribute.

if you change the css back to the above and change your code to the following it should work:

Code: Select all

<h1><a href="?v=<?=$i;?>" target="_blank">text</a></h1>

welshstew · #8 Sep 27th, 2007, 08:47

p.s. you can assign div (class) many number of times across your page. this allows you to cut down on the amount of duplicate css code that you develop.

however, you can only use id's once within a div class

look at some of karinnes resources to get a good understanding for css attribute.

Good luck

Stew

Jason3107 · #9 Sep 27th, 2007, 08:54

so i should do away with my original css code?

i have tried this and i now get the same thing still but the text is very large!

Quote:

Originally Posted by welshstew

h1 is not the div name (class) but the attribute.

if you change the css back to the above and change your code to the following it should work:

Code: Select all

<h1><a href="?v=<?=$i;?>" target="_blank">text</a></h1>

welshstew · #10 Sep 27th, 2007, 09:02

change only this

Code: Select all

h2 a:link {color: #0000ff;}
h2 a:visited {color: #ff0000;}
h2 a:active {color: #00FF00;}
h2 a:hover {background-color: #ffffff;}
h2 a {text-decoration: none;}

to this

Code: Select all

h1 a:link {color: #0000ff;}
h1 a:visited {color: #ff0000;}
h1 a:active {color: #00FF00;}
h1 a:hover {background-color: #ffffff;}
h1 a {text-decoration: none;}

and change this line:

Code: Select all

<a href="?v=<?=$i;?>" target="_blank" class="h2"><h1>text</h1></a>

to this:

Code: Select all

<h1><a href="?v=<?=$i;?>" target="_blank">text</a></h1>

and that should get the effect you are after. all the other css code should stay as is.

AdRock · #11 Sep 27th, 2007, 09:19

I read somewhere on the forum (probably the CSS stickies) that the order of links in css should follow LoVe HAte

a:link
a:visited
a:hover
a:active

don't know why it should be like this but that's what it says

Jason3107 · #12 Sep 27th, 2007, 10:33

this is what i have now after stripping all the text and pics.

the top container is what it should look like but the colours are not correct, i want them black text always but white when hovered over.

the bottom containers does not show correctly the second line of text in it is not inline with the first line of text, the colours in the bottom container are correct.

what is wrong with the code?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.container2 {background:#325EAF; margin:0 5px;}
.rtop2, .rbottom2{
display:block;
background:#507BCD;
}
.rtop2 *, .rbottom2 *{
display: block;
height: 1px;
overflow: hidden;
background:#325EAF;
}


.container1 {background:#799BD9; margin:0 5px;}
.rtop1, .rbottom1{
display:block;
background:#507BCD;
}
.rtop1 *, .rbottom1 *{
display: block;
height: 1px;
overflow: hidden;
background:#799BD9;
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}


h1 {
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;
}

h2 a:link {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
h2 a:visited {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
h2 a:hover {color: #ffffff;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
h2 a:active {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
h2 a {text-decoration: none;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
-->
</style>

</head>
<body bgcolor="#000000">

<table align="center" style="border-collapse:collapse;">
  <tr>
    <td valign="top" bgcolor="#000000">
      <table width="100%" cellpadding="8" style="border-collapse:collapse;">
        <tr> 
          <td width="94%"> <div align="center"> 
              <table width="760" border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#507BCD" style="border-collapse:collapse;">
                <tr> 
                  <td width="100%"> <div align="center">
                      <table width="100%" style="border-collapse:collapse;">
                        <tr> 
                          <td width="72%" valign="top"> <table width="100%" style="border-collapse:collapse;">
                              <tr> 
                                <td>&nbsp;</td>
                              </tr>
                              <tr> 
                                <td> <table width="100%">
                                    <tr> 
                                      <td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
                                          <h1><a href="?v=3427" target="_blank">site1</a></h1>
                                          <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
                                    </tr>
                                    <tr> 
                                      <td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
                                          <h2><a href="?v=3426" target="_blank">site2</a></h2>
                                          <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table></td>
                        </tr>
                      </table>
                      <br>
                    </div></td>
                </tr>
              </table>
            </div></td>
        </tr>
        <tr> 
          <td></td>
          <td width="2%"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</html>

AdRock · #13 Sep 27th, 2007, 11:30

Is this what you are looking for

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.container2 {background:#325EAF; margin:0 5px;}
.rtop2, .rbottom2{
display:block;
background:#507BCD;
}
.rtop2 *, .rbottom2 *{
display: block;
height: 1px;
overflow: hidden;
background:#325EAF;
}
 
.container1 {background:#799BD9; margin:0 5px;}
.rtop1, .rbottom1{
display:block;
background:#507BCD;
}
.rtop1 *, .rbottom1 *{
display: block;
height: 1px;
overflow: hidden;
background:#799BD9;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
 
h1 {
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;
}
a.one:link {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
a.one:visited {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
a.one:hover {color: #ffffff;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
a.one:active {color: #000000;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
a.one {text-decoration: none;
    text-align: left;
    font: small tahoma; 
    font-size: 12px;
    font-weight: bold;
    margin: 0 0;
    padding: 5;}
-->
</style>
</head>
<body bgcolor="#000000">
<table align="center" style="border-collapse:collapse;">
  <tr>
    <td valign="top" bgcolor="#000000">
      <table width="100%" cellpadding="8" style="border-collapse:collapse;">
        <tr> 
          <td width="94%"> <div align="center"> 
              <table width="760" border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#507BCD" style="border-collapse:collapse;">
                <tr> 
                  <td width="100%"> <div align="center">
                      <table width="100%" style="border-collapse:collapse;">
                        <tr> 
                          <td width="72%" valign="top"> <table width="100%" style="border-collapse:collapse;">
                              <tr> 
                                <td>&nbsp;</td>
                              </tr>
                              <tr> 
                                <td> <table width="100%">
                                    <tr> 
                                      <td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
                                          <a class="one" href="?v=3427" target="_blank">site1</a>
                                          <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
                                    </tr>
                                    <tr> 
                                      <td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
                                          <a class="one"  href="?v=3426" target="_blank">site2</a>
                                          <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
                                    </tr>
                                  </table></td>
                              </

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
change colour of text, on hover.