Skip to main content
J
JoyceOdell
Inspiring
February 29, 2024
Answered

Is there any way to differentiate between link behavior

  • February 29, 2024
  • 3 replies
  • 627 views

Is there any way to differentiate between the behavior of links depending upon how they are placed?

Specifically, I am happy with the behavior of the link text when it's on a button. Not so much when it is sitting out on the page as text, such as a download link, or is incorporated into a paragraph. After all, the button background changes on hover to contrast with the text in its hover state. The general page background does not. 

Ideally I would like to create a different link style for text out on the page with a hover state that uses a different color from that of a button text. I would expect that to be possible with .css, but there doesn't appear to be any way to seperate the two.

Does anyone have any suggestions on whether this is possible?

    This topic has been closed for replies.
    Correct answer osgood_

    Because you have set a higher specificity by using a:link, a:visited etc (which targets ALL a tags) you need to use the 'important' keyword:

     

    .link-text {

    color: #B30000!important;

    }

     

    .link-text:hover {

    color: green!important;

    }

     

    <a href="#" class="link-text">Link</a>

     

    I don't set an overall styling for the a tag. I tend to target them:

     

    <div class="products">

    <a href="product_1.html">Product 1</a>

    </div>

     

    .products a {

    color: red:

    }

    .products a:hover {

    color: pink;

    }

    3 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    February 29, 2024

    One thing to keep in mind, if using standard CSS pseudo-classes for your links, they need to be in order in your stylesheet or they can act strangely...

    a:link {properties:values;}        (a link that hasn't been visited yet in your browser history)
    a:visited {properties:values;}   (a visited link in your browser history)
    a:hover {properties:values;}    (a link that is being hovered over by the mouse pointer)
    a:active {properties:values;}    (a link that is actively being clicked. NOT a link to the page you are currently on)

    There is also a:focus, but it's not part of the 4 above and can appear anywhere you like...

    a:focus {properties:values;} (a link that has the tab focus from your browser. Handy in bringing attention to links during keyboard navigation)

      J
      JoyceOdellAuthor
      Inspiring
      February 29, 2024

      Yeah, that makes all kinds of sense.

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      February 29, 2024

      If you choose to use Bootstrap the code would look like

      <a class="btn btn-primary" href="#" role="button">Link</a>

      See for more...

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        O
        osgood_
        Legend
        February 29, 2024

        Just add a css class to the link tag as below:

         

        <a href='some-link.html' class='linkText">Text Link</a>

         

         

        Then style the link tag with css:

         

        .linkText {

        text-decoration: none;

        color: red;

        }

         

        .linkText:hover {

        background-color: red;

        color: #fff;

        }

        J
        JoyceOdellAuthor
        Inspiring
        February 29, 2024

        Thanks. It certainly *seemed* like it ought to be possible.

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        February 29, 2024

        A basic example using HTML semantic tags.

        <nav>

        Link | Link | Link

        </nav

         

        <main>

        <p>Lorem ipsum dolor, LINK.</p>

        </main>

         

        <footer>

        LINK | LINK | LINK

        </footer>

         

        CSS styles:

        nav a {color:red}

        main a {color:blue}

        footer a {color:green}

         

        Hope that helps.

         

        Nancy O'Shea— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices