SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover effect on some links but not others

    Hello,

    I have

    a:hover {color:#304448; background-color:#F8F0A8;}

    in my style sheet in the head section, which works fine, but there are a couple of links for which I don't want this hover effect to occur. I considered making another class, but my page has a background image and I don't know how to specify the hover background colour as transparent (or none). Is there some other way to go about this? Any help is much appreciated.
    Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use classes to get that done. Take a look at the following stylesheet:

    Code:
    a:hover {color:#304448; background-color:#F8F0A8;} 
    
    a.nonhover {color:#304448; background-color:#F8F0A8;}
    These classes can als be combined with the hover-attribute, so a.nonhover:hover is also a possible class.

    You refer to these classes in your links, by assiging them a class-attribute. This needs to be done in the following way: <a class=nonhover href="bla.html">.

  3. #3
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. But I've tried the code out and, if I've used it correctly, it seems like all the links will still have the same hover effect. How do I specify some links that have no hover effect?

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I see the problem I think. I usually use a seperate class for all types of links. I never work with a:active or a:hover in general, it is always combined with classes.

    So, what you should do, is this:
    Code:
    a:hover {color:#304448; background-color:#F8F0A8;} 
    
    a.nonhover:hover {set the original values for the link (the colors etc. you want it to have when it is hovered) here;}
    Let me explain it a bit more with the following example: You have a website, and you want all the links to have the colour #000099. Now, on some of these links, you don't want to apply the hover-attribute. When hovered on, the link will change to #000000. This is done, by using the following stylesheet:

    Code:
    a.menu {color: #000099;}
    a.menu:hover {color: #000000;}
    
    a.nonhover {color: #000099;}
    a.nonhover:hover {color: #000099;}
    The last line of code is optional, since a:hover has not been defined, and thus is the default -- which means no hovering effect will be used.

    I hope this is a bit more understandable, if you want some more explanation, feel free to ask .

  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    to add to what the others have said, if you don't mention a background-color its transparaent by default but for exact css then you need to state a background-color if you state a color, and so include

    background-color:transparent;

    in your code



    I have also found that Opera in particular can get funny about which order you place your styles, put the standard a:link, a:visited, a:active, a:hover {} first and then afterwards the a:link.footer etc...

    Good luck

    Sarah

    Edit:

    ps forgot to mention that NS doesn't like transparent and can render it black, you'll need to check but as NS doesn't deal understand hover (css2) anyway you might be okay
    Last edited by Sarah; Feb 5, 2002 at 09:31.
    Regular user

  6. #6
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies. I understand now what you meant, Mark T, about specifying all your classes and I've tried it out and it works.
    But since I only have 3 links where I don't want the hover effect, and about 16 where I do, I think I'll use the 'transparent' attribute, to save code ( - since I can't seem to get that div tag working).
    i.e.
    a:hover {color:#304448; background-color:#F8F0A8;text-decoration:underline;}
    a.nohover:hover {background-color:transparent;}
    and then just use class="nohover" on those special 3 links. Works in my Opera & IE. Nothing disastrous happened when I tried it in my Netscape. Actually nothing happened at all, but the lack of hovering effect is the least of my problems in Netscape....
    Last edited by slp; Feb 5, 2002 at 10:59.

  7. #7
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yeah older versions of NS don't recognize hover but NS6 etc do

    Sarah
    Regular user

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would bet that the links that "aren't working" are links that you have previously clicked on right? That's because those are no longer "a:hover" links. After those links have been clicked on once, they become "visited" links and need to be referred to differently.

    Like so:
    a:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; }
    a:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }
    a:visited { font-family: verdana; color: #666666; font-size: 9pt; }
    a:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }

    or if you want an alternate class like so:
    a.footer:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; }
    a.footer:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }
    a.footer:visited { font-family: verdana; color: #cccccc; font-size: 9pt; }
    a.footer:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }

    Using just the first example, all links on your page will be affected. To achieve the second example as well, any link that you want to affected should have this in the code:

    class="footer"

    so the full A code would look like this:
    <a href="somepage.html" class="footer">footer link</a>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a:hover { } will work for visited and active links automatically.
    ck :: bringing chris to the masses.

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...

    I don't seem to recall it working for me. I'll have to look into that again. Is that an IE6 thing?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    SitePoint Enthusiast Crooner's Avatar
    Join Date
    Apr 2001
    Location
    Chambersburg, PA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While we're talking about classes and links - Is there a way to define a style so that the links inherit the font attributes - ie. I would like to define the class in the table cell <td class=topmenu> then have the information that is dynamically pulled in (text and links) inherit those properties. Is that possible?

    As I have it now, the only way to inherit the font characteristics is to define the class inside each of the links <a href="index.php" class=topmenu>.

    Thanks,
    Dean-Martin.com Managed IT Solutions
    eLiveHost.com Premium Hosting
    4StateShopper.com Community Forums

  12. #12
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    creole, hover works on all links for me even if they are visited (ie 5.5 win nt) ? As I say its only older version where hover just doesn't work at all.

    crooner don't think its posisble, other than placing class tags throughout... like what you are doing.

    Sarah
    Regular user

  13. #13
    SitePoint Member nineinchnuns's Avatar
    Join Date
    Jan 2001
    Location
    Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found that hover worked until the link became a visited link. After that it stopped. To fix this I removed A:visited entirely from my css file and hover worked. Not sure why but give it a try by commenting out A:visited style and see what you get.
    robo

  14. #14
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    creole try moving a.hover to the bottom of the list of styles ie: if you have
    a.link
    a.hover
    a.visited
    then arange it so that a.hover is below a.visited so it would look like;
    a.link
    a.visited
    a.hover
    i think this should fix your problem

  15. #15
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    sounds like a plan, that is how mine are written and I haven't 'lost' the hover effect on visited links

    Sarah
    Regular user


Bookmarks

Posting Permissions

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