4 Replies Latest reply on Feb 2, 2010 10:39 PM by martcol

    Rollover Text Links: Can I use different colors on one page?

    M_G6 Level 2

      Is it possible to assign one color scheme in Div "A", and another scheme in Div "B", on one page? In other words, in Div Box 1, I want:

       

      Hover:Blue

      Link: Red

      Visited: Red

      Active: Red

       

      And in Div Box 2, I want:

       

      Hover: White

      Link: Green

      Visited: Green

      Active: Green

       

       

      If this is at all possible, how should my code be written?

       

      Thank you!

        • 1. Re: Rollover Text Links: Can I use different colors on one page?
          fermium5

          Yes, this is possible. Use different Classes or Id's for your div's and style them according to what you're looking for.

           

          This is an example from my Fragrance site:

           

          .catnav a {
          color:#714B75;
          font-family:Arial,Helvetica,sans-serif;
          font-size:11px;
          line-height:12px;
          padding-bottom:3px;
          text-decoration:none;
          }

          .catnav a:hover {
          color:#E9D2EC;
          font-weight:bold;
          text-decoration:underline;}

          To change colors in another div, simply change class names:

          .middlenav a {
          color:black;
          font-family:Arial,Helvetica,sans-serif;
          font-size:11px;
          line-height:12px;
          padding-bottom:3px;
          text-decoration:none;
          }

          .middlenav a:hover {
          color:blue;
          font-weight:bold;
          text-decoration:underline;}

           

           

          Your html code will look like this:

           

          <div class="catnav"><a href="yourlink"></a></div>

           

          Different colors:

           

          <div class ="middlenav"><a href="yourlinkgetsanewcolor"></a></div>

           

          Hope this helps!

          1 person found this helpful
          • 2. Re: Rollover Text Links: Can I use different colors on one page?
            martcol Level 4

            Give your <div> that contains your links an id or class.  Style on the id or class:

             

            #specialColor a:link {

                 color: red;

            }

             

            This rule styles a tag that is a descendant of #specialColor.

             

            <div id="specialColor">

                 <a href="#">Link Text Will Be Red</a>

            </div>

             

            It will still do it if it's

             

            <div id="specialColor">

                 <li><a href="#">Link Text Will Be Red</a></li>

            </div>

             

            Or..

             

            <div id="specialColor">

            <p>Lorem ipsum dolor sit amet, <a href="#">My Red Link Text</a> adipiscing elit. Duis ligula lorem,
              consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam
              nunc vitae purus.</p>

            </div>

            1 person found this helpful
            • 3. Re: Rollover Text Links: Can I use different colors on one page?
              M_G6 Level 2

              Thank you Fermium5 and Martcol. These methods do indeed work. Many, many thanks!

              • 4. Re: Rollover Text Links: Can I use different colors on one page?
                martcol Level 4

                Mark BXD wrote:

                 

                Thank you Fermium5 and Martcol. These methods do indeed work. Many, many thanks!

                Terrific!