www.webdeveloper.com
Results 1 to 6 of 6

Thread: Double HOVER colors?

  1. #1
    Join Date
    Apr 2003
    Location
    Amsterdam, The Netherlands, Europe, The World
    Posts
    2

    Double HOVER colors?

    Hi All!


    I'm making a website and I want it to look good. I've always liked the hover command to diplay the text in another color when you hover your mouse over it. I made this work in my CSS file and all is working properly.

    But.. now onto the problem. My webpage has three base-colors and the text is white, but when you hove rove rit it changes to one of the THREE base colors. Normally this works well, but I've got a table on my website too with another background color, which is actually the same as the hover color. I can't (or don't want to would be bettter) change the the base and background color, so I want to change the hover color. But only on a specifick place, not for the whole html document.

    So.. is there a way to have more than ONE hover color on a website using CSS? Or HTML? I've searched the web, but I haven't come up with anything good. I really want to make this work, right now my text is 'disappearing' when you hover your mouse over the textlink

    HELP!

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Try something like this:

    Code:
    <style type="text/css">
    A.tablelinks:link, A.tablelinks:visited, A.tablelinks:active
    {
    	color: darkblue;
    	text-decoration: none;
    }
    A.tablelinks:hover
    {
    	color: red;
    	text-decoration: none;
    }
    </style>
    </head>
    <body>
    <a href="http://www.w3c.org" class="tablelinks">test</a>
    Then, you just give the class tablelinks to any link that you want to use this css.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Apr 2003
    Location
    Amsterdam, The Netherlands, Europe, The World
    Posts
    2
    Okay, this opened up some perspectives for me to work on. But what if the two text parts already have a class assigned to them? The normal one just with the one with the hover command in it and the special one with a few other settings. Should i add the thing you posted here to the special one?

    Or should I just write a separate CSS for those pages (i actually have that already) and use your method on the two (only two of them) text-links that need a different hover color?




    Now that I think of it.. the second method, your method, sounds way easier!


    Thanks for the help! you're great!

  4. #4
    Join Date
    Apr 2003
    Posts
    21
    something neato 'bout CSS ----> it carries 3 primary managers for tags.

    1. #ID
    2. .CLASS
    3. A:hover(standard feature)

    All can be implemented at the same time to the same tag..though it will become confusing to edit later on for high end sites.

    the last method that can be added even with the above 3 would be placing it directly into your HTML
    ie:
    <A id="butter" Class="peanut" Style="cursor:hand;"></a>

    hope this gives you a lot to play with.
    Netscape Navigator...Frontpage....can life as an SEO be any more complicated?

  5. #5
    Join Date
    Feb 2003
    Location
    UK
    Posts
    190

    Re: Double HOVER colors?

    I was just about to ask the same thing but now I don't have to

  6. #6
    Join Date
    May 2003
    Posts
    18
    At times whenever, new hover effects are required in the same page, the concept of ID can be effectively used as shown below :

    <table>
    <tr class="genfont">
    <td><a href="Normal.htm">Normal Hover...</a>
    </td>
    <td id="nav"><a href="Test.htm">New Hover...</a>
    </td>
    </tr>
    </tr>
    </table>

    Now, the <td> id="nav" corresponds to new set of class defined in your External Style Sheet.

    #nav a:link , #nav a:active , #nav a:visited
    {
    font-size:7.5pt;
    color:blue;
    cursor:default;
    text-decoration:none;
    }
    #nav a:hover
    {
    font-size:7.5pt;
    color:red;
    cursor:hand;
    text-decoration:underline;
    font:bold;
    }

    Similarly, different cell ID's can be made use to enhance the User Interface of site.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles