10 Replies Latest reply: Aug 5, 2012 6:19 AM by MurraySummers RSS

    Hover attribute not working on .html-only links

    schulzcreative Community Member

      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!

        • 1. Re: Hover attribute not working on .html-only links
          BarakObi Community Member

          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.

          • 2. Re: Hover attribute not working on .html-only links
            schulzcreative Community Member

            You are corect. Something more than a question would help. I am new to posting here.

             

            Here is a sample page:

            http://www.paraxplorerproject.com/index2.html

             

            As you mouse over the following links, they are linked to pages not including an ".html" extension, and change as expected.

            -- Email the team

            -- Media inquiries

            -- Ticket information is here

            -- Erika Frost

             

            The following link is directed to a internal page with a .html and does not work:

            -- Enroll in class and review evidence here


            This is common throughtout the site and each link calls for the same CSS attributes. Just for grins, if I change the link's extension to something other than.html, say .asp, it works!

             

            By the way, I just changed to Mountain Lion. Interesting how it makes html text look unusually thick in browsers other than Safari.

             

            Thanks.

            • 3. Re: Hover attribute not working on .html-only links
              mytaxsite.co.uk MVP

              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.

              • 4. Re: Hover attribute not working on .html-only links
                schulzcreative Community Member

                I tried the re-ordering and it didn't work, unfortunately. I'm thinking if ordering was the issue, it would have prevented all hovering not to work, not just associated links that end in ".html". I really do appreciate your time in helping, though...

                • 5. Re: Hover attribute not working on .html-only links
                  schulzcreative Community Member

                  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!

                  • 6. Re: Hover attribute not working on .html-only links
                    mytaxsite.co.uk MVP

                    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.

                    • 7. Re: Hover attribute not working on .html-only links
                      mytaxsite.co.uk MVP

                      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>

                      • 8. Re: Hover attribute not working on .html-only links
                        MurraySummers ACP/MVPs

                        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.

                        • 9. Re: Hover attribute not working on .html-only links
                          schulzcreative Community Member

                          I was going through the CSS creation process as provided by Dreamweaver which itemizes it all, obviously. I was not aware of the consolidation possibility above. Another lesson learned. THANK YOU, Murray!

                          • 10. Re: Hover attribute not working on .html-only links
                            MurraySummers ACP/MVPs

                            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 { ... }