#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Oklahoma City
    Posts
    9
    Rep Power
    0

    Unhappy Inline style sheets w/ hover


    Hello-
    I'm currently using an external style sheet for my website, but would like to change the style of some of the links in my menu bar. My objective is to set the text color to #006633 & use hover to change to #ffffff upon mouseover. This is what I thought to be the correct way to achieve this:

    <td align="center" width="100"> <a style="{color: #006633;} :hover {color: #ffffff;}" href="index.html"><strong>Home</strong></a></td>

    Although, the color is being successful set, the hover is not.

    Any input would be appreciated.

    -rbond
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Iasi, Romania
    Posts
    20
    Rep Power
    0

    hi


    To setup links color in your pages you should use this (link, visited, active and hover are pseudoelement of A selector):

    Code:
    A:link
    {
       color: #006633;
    }
    A:visited
    {
       color: #yourColor;
    }
    A:active
    {
       color: #yourColor;
    }
    A:hover
    {
       color: #ffffff;
    }
    Stefan
    Last edited by stefan.isarie; March 15th, 2003 at 10:10 AM.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Oklahoma City
    Posts
    9
    Rep Power
    0
    Thanks for replying Stefan:

    I have the links colors defined in my external style sheet; but what would you suggest that I would do to change the style of a specific link on the page?

    Thanks
    -rbond
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Iasi, Romania
    Posts
    20
    Rep Power
    0

    simple


    you have to define a new class:

    Code:
    	.nav A:link
    	{
       		color: #006633;
    	}
    	.nav A:visited
    	{
    		color: #yourColor;
    	}
    	.nav A:active
    	{
    		color: #yourColor;
    	}
    	.nav A:hover
    	{
    		color: #2E8A2B;
    	}
    In this way we have defined 'nav' class. In order to have your desired efect, you have to do something like this:

    Code:
    <p class="nav"><a href="12">Text</a> | <a href="13">Text</a></p>
    Stefan
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Oklahoma City
    Posts
    9
    Rep Power
    0
    Stefan:

    Using the .nav class worked exactly as I needed it.

    I created the .nav class per your instructions, and changed my link to the following:

    <td align="center" width="100"><h4 class="nav"> <a href="index.html">Home</h4></a></td>


    Thanks for the help.
    -rbond
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,879
    Rep Power
    24
    A:link { color: red } /* unvisited links */
    A:visited { color: blue } /* visited links */
    A:hover { color: yellow } /* user hovers */
    A:active { color: lime } /* active links */

    Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
    http://www.w3.org/TR/REC-CSS2/select...seudo-elements
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Iasi, Romania
    Posts
    20
    Rep Power
    0
    Originally posted by rbond
    Thanks for the help.
    -rbond
    Your welcome!

    Stefan

IMN logo majestic logo threadwatch logo seochat tools logo