CODEWITHSUNDEEP
htmlcsshyperlink
user2909180
user2909180

Reputation: 215

Change between 2 links

I have 2 links Cats and Dogs.

When Cats is active I want it green (Dogs is then blue), then when I change to Dogs I want it blue.

Dogs will then be green. When changing back it will be blue again.

So I want to switch between (green as active) and blue (inactive)

How can I do this with CSS?

<html lang="en">
<head>

<style>
    /* unvisited link */            
    a:link {
        color: blue;

    }
    /* visited link */
    a:visited {
        color: green;
    }
    /* mouse over link */
    a:hover {
        color: green;
   
    }
    /* active link */
    a:active {
        color: green;
    }
</style>
</head>

    <p><a href="cats.html">Cats</a></p>
    <p><a href="dogs.html">Dogs</a></p>

</html>

Upvotes: 0

Views: 65

Answers (1)

Waseem Almoliky
Waseem Almoliky

Reputation: 989

I think this is what you want. whenever you want to select element based on the a tag then href and id should be set first.

<html lang="en">
<head>

<style>
    /* unvisited link */            
    a:link {
        color: blue;

    }
    /* visited link */
    a:target {
        color: green;
    }
    /* mouse over link */
    a:hover {
        color: green;
   
    }
    /* active link */
    a:active {
        color: green;
    }
</style>
</head>

    <p><a href="#cats" id="cats">Cats</a></p>
    <p><a href="#dogs" id="dogs">Dogs</a></p>

</html>

Upvotes: 1

Related Questions