Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    14
    Member #
    18219
    Hi,

    I'd like to be able to format different parts of the same link text separately - for example, have the two words of the link text different colours - while having the whole link text take the same formating when "hovered".

    I can get the first part:

    <a href="t1.html">dog <span class="blue">cat</span></a>

    with associated css of:

    a {color:black;}
    a:hover {color:red;}
    .blue {color:blue;}

    which puts "dog" in black and "cat" in blue, but only "dog" turns red when hovered over.

    Any thoughts on how to make both "dog" and "cat" turn red when hovered??

    Thanks,

    Steve

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    a {color:black;}
    a:hover {color:red;}
    .blue {color:blue;}
    a.blue:hover {color:red;}


    I didn't test that, but see what happens.


  4. #3
    Junior Member
    Join Date
    Feb 2009
    Posts
    14
    Member #
    18219
    Thanks for the suggestion - unfortunately it doesn't solve the problem.

    The word "cat" is still in blue - the word "dog" and the underline for the link change to red.

    Thanks,

    Steve

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Make it span.blue -- a.blue doesn't exist. Don't know if you'll be able to change the underline color, though. See what happens.

  6. #5
    Junior Member
    Join Date
    Feb 2009
    Posts
    14
    Member #
    18219
    Thanks shadowfiend - span.blue:hover works - in Firefox, but not in IE7. In fact, just putting .blue:hover acts in the same way .

    So, I now have:

    a {color:black;}
    a:hover {color:red;}
    .blue {color:blue;}
    .blue:hover {color:red;}


    As for the underline - I'm going to remove that in any case.

    Thanks again,

    Steve

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    What is the purpose for doing this?
    Maybe if we saw an example, it might trigger some different approaches.


  8. #7
    Junior Member
    Join Date
    Feb 2009
    Posts
    14
    Member #
    18219
    Firstly, scrub my last comment on not needing the "span" in the span.blue:hover css rule - that it seemed to work without it was, I think, a function of Firefox not doing a full re-load when I hit "Refresh" - this is something I've noticed before. If you are doing a series of repeated "change" "save" "refresh" cycles, you sometimes have to close Firefox down and reload the files from scratch.

    Anyway - to the color problem. It's just a design feature we wish to include. We're working on a site with information about kennels/catteries and want to have links like:

    Kennels & catteries
    Catteries only
    Others


    with all links (including the whole "Kennels & catteries" link) turning red when hovered.

    Sorry I don't have any actual links to post - I'm working on this offline at the moment and don't have anything online.

    Thanks,

    Steve

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    This isn't the correct solution, but the best I can think of.
    Maybe there's a Javascript solution?


    Code:
    <html>
    <style>
    a.kennels:link,a.kennels:active,a.kennels:visited{ 
    color:black;
    text-decoration:none;
    }
    a.kennels:hover {
    color:red;
    text-decoration:none;
    }
    a.catteries:link,a.catteries:active,a.catteries:visited{ 
    color:black;
    text-decoration:none;
    }
    a.catteries:hover {
    color:green;
    text-decoration:none;
    }
    </style>
    <body>
    <a href="t1.html" class="kennels">Kennels</a> & <a href="t2.html" class="catteries">Catteries</a>
    </body>
    </html>


  10. #9
    Junior Member
    Join Date
    Feb 2009
    Posts
    14
    Member #
    18219
    Thanks - but this splits up the "Kennels & Catteries" link into two separate links - we want it to be a single link.

    I think we'll stick with how we've got it after previous replies - it works as we want it to in Mozilla, but not in IE7 (maybe IE8 will work...)

    Thanks again for all the replies,

    Steve

  11. #10
    Junior Member
    Join Date
    Mar 2009
    Posts
    2
    Member #
    18430
    Guys, these info are really help for me,
    Are you all sure? Is it working for Mozilla??? I don't think so, I am using little older version of Mozilla, It did not work for me, Anyone had any suggestions?? Regards, Karl from Florida Beach Rentals


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com