/    Sign up×
Community /Pin to ProfileBookmark

Double HOVER colors?

Copy linkTweet thisAlerts:
Apr 07.2003

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! ?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroApr 07.2003 — Try something like this:

<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 [i]tablelinks[/i] to any link that you want to use this css.
Copy linkTweet thisAlerts:
@StriferauthorApr 07.2003 — 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! ?
Copy linkTweet thisAlerts:
@kryogenicApr 17.2003 — 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.
    Copy linkTweet thisAlerts:
    @neilApr 28.2003 — I was just about to ask the same thing but now I don't have to
    Copy linkTweet thisAlerts:
    @KeshavaRMay 05.2003 — 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.

    ?
    ×

    Success!

    Help @Strifer spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.11,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...