Skip navigation
schulzcreative
Currently Being Moderated

Hover attribute not working on .html-only links

Aug 4, 2012 2:13 PM

Hello Dreamweaver Savges,

 

I'm have an odd problem since starting a new site using CS6. I have properly created CSS text link attributes the site and have found the hover attribute (in this case a simple color change) will not work when a link is made to an .html file. The color change hover works when linked any other extension and external links, but just not .html. Does anyone know what's going on? It's driving me newly crazy!

 

Thanks!

 
Replies
  • Currently Being Moderated
    Aug 4, 2012 2:48 PM   in reply to schulzcreative

    Without a valid link or a snippet of your code, we can only guess what could be the problem.

     

    My first guess is that your code is incorrect so correct it and your problem is solved.

     

    Second thought:  Post a link to your test page and/or code here.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 5:31 PM   in reply to schulzcreative

    The order of how you define the styles is very important.  I suggest use this order:

     

     

     

     

    .TextGray15-20Reg a:link {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 15px;

        font-style: normal;

        line-height: 20px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #3E8166;

        text-decoration: none;

     

    }

    .TextGray15-20Reg a:visited {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 15px;

        font-style: normal;

        line-height: 20px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #3E8166;

        text-decoration: none;

     

    }

    .TextGray15-20Reg a:hover {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 15px;

        font-style: normal;

        line-height: 20px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        text-decoration: none;

        color: #1A4435;

    }

     

    .TextGray15-20Reg a:active {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 15px;

        font-style: normal;

        line-height: 20px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #3E8166;

        text-decoration: none;

     

    }

     


     

     

    And, of course, check the color of hover to see if it is what you want.

     

    Save the file and preview in the browser.  If it doesn't work then clear the browser cache, close the browser and restart the browser.  Style cache is very persistent and keeps re-using it so if you have the same name styles, it gets re-used.  The idea is to reduce the band-width.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 6:18 PM   in reply to schulzcreative

    schulzcreative wrote:

     

    UPDATE: I did some addition re-ordering and now have it working in all browsers but Firefox on Mac. Thanks again so much for taking the time to help me out!

     

    Oop;  I don't have a Mac so can't check it.  Sorry.  Perhaps John Waller, Nancy O or Murray can help here.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 6:27 PM   in reply to mytaxsite.co.uk

    It could be that you have used some non-standard html tags:

     

    Data-Font, Data-Layout, Data-Send etc etc are not standard.  I would seriously validate the HTML first and if necessary redo the page.

     

    Same thing with the CSS validation.

     

    <http://validator.w3.org/#validate_by_uri+with_options>

     

    <http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2012 5:42 AM   in reply to mytaxsite.co.uk

    There is no need for this CSS to be so voluminous! It is unnecessarily redundant.  This CSS below will work just fine -

     

    .TextGray15-20Reg a, .TextGray15-20Reg a:visited, .TextGray15-20Reg a:active {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 15px;

        line-height: 20px;

        color: #3E8166;

        text-decoration: none;

     

    }

     

    .TextGray15-20Reg a:hover {

        color: #1A4435;

    }

     

    The only *potential* issue with this method is that if you have any named anchors within .TextGray15-20Reg, they too will be styled by that first rule.  I consider that unlikely though. Note that all link states are the same except for the hover.  And the links must always be defined in the order that mytaxsite has used (LVHA - or "Love HA!" as a mnemonic).

     

    The data-xxx attributes are quite normal on an HTML5 page, but this page has an XHTML doctype.  Nevertheless, I would not expect those usages to interfere with link expression.  The only way we can know for sure is to have a link to the real page.  The "enroll..." link is working fine for me on the Mac on the sample page.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2012 6:19 AM   in reply to schulzcreative

    Examine the syntax used in the consolidated selector (the first one) carefully.  Note that the individual grouped selectors are separated by a comma, and that the full context of each group is complete.  To clarify, for this simplified code -

     

    <p><a href="foo">foo</a></p>

     

    this will work -

     

    p a, p a:visited, p a:active { ... }

     

    but this will not -

     

    p a, a:visited, a:active { ... }

     

    The latter will correctly style anchor tags that are within paragraph tags for the a:link state, but will then style ALL anchor tags regardless of their context for the visited and active states.

     

    In fact, it's not necessary to reiterate those states in the selectors.  A simple rule like this -

     

    p a { ... }

     

    will style ALL states of all anchor tags within paragraphs.  Typically, that's how I will do my pseudo-class assignments:

     

    a { ... }

    a:hover { ... }

     

    Usually I'm only interested in the hover state, but if I need the visited state to express, then I add it between the two -

     

    a { ... }

    a:visited { ... }

    a:hover { ... }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points