Only one of my class statements in CSS works

Question

i have trouble adding multifunctionality to my href.

This is my code:

HTML:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css-style.css">
         <title></title>
     </head>
     <body>
        <h1>Hello HTML!</h1>
        <p>I am Hristiqn. I am from <a class="magic" href="https://en.wikipedia.org/wiki/Neverland">Neverland</a></p>
    </body>
</html>

CSS:

a.magic:visited {font-size: 300px; 
  background: -webkit-linear-gradient(gold,green);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;}

 a.magic:active {font-size: 300px; 
  background: -webkit-linear-gradient(red,green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

  a.magic:hover { font-size: 60px;
  background: -webkit-linear-gradient(white, green);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;}

Right now I'm trying to do that by setting the needed style properties to a class, called magic, but it seems that only the :hover works. I tried to set the properties by name, but the effect was the same - only the hover works.

So i want the link button to do different things whenever i hover over it, whenever its active and so on, but it seems that only my :hover statement works and i have no idea why.

Thank you.

[This could help](https://css-tricks.com/remember-selectors-with-love-and-hate/) — Ron van der Heijden, Mar 03 '17 at 11:31
You are required to supply a minimal example of the code that causes the problem here, not a third party web site that may change or disappear tomorrow helping no one in the future with similar problems. — Rob, Mar 03 '17 at 11:47

score 0 · Answer 1 · answered Mar 03 '17 at 11:28

0

I've noticed that your </a> is incorrectly closed. Try fixing that.

answered Mar 03 '17 at 11:28

Leon Freire

798
2
6
16

Hira Majid · Answer 2 · 2017-03-03T12:08:00.273

0

@Християн Христов use below code may be its help you.

a.magic:visited {
      font-size: 30px;
      background: -webkit-linear-gradient(gold,green);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

     a.magic:active {
       font-size: 30px;
      background: -webkit-linear-gradient(red,green);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    a.magic:hover {
      font-size: 60px;
      background: -webkit-linear-gradient(white, green);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

edited Mar 03 '17 at 12:08

answered Mar 03 '17 at 11:44

Hira Majid

534
2
7
22

If you’re using background images to style links and indicate if they are visited, that will no longer work. – Hira Majid Mar 03 '17 at 11:52
You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color') See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ – Hira Majid Mar 03 '17 at 11:53
The code he shared before he use class name "magicz" instead of class name "magic" anyhow I have edited my code. – Hira Majid Mar 03 '17 at 12:10
@HiraMajid Thank's for your help, the :visited now works with 'color' (i removed the gradient stuff), but still when i click on the link(:active) - nothing happens, it just keeps the :hover settings. – Християн Христов Mar 03 '17 at 12:25

score 0 · Answer 3 · answered Mar 03 '17 at 12:07

You don't have a CSS rule for the regular a:link state - is that on purpose?

That way you will only see changes when you move the cursor over the link (:hover), or after you have already visited the linked page and return to the original page (:visited), or in the very short period of time after you click on the link and before the new page is opened (:active). But the regular link will be displayed with the default settings. If you want that to change, create another rule (or add a second selector to one of the existing rules), using the selector a.magic:link

score 0 · Answer 4 · edited May 23 '17 at 10:29

0

Get rid off all this. Try achieve same effect with color, background only

-webkit-background-clip: text; -webkit-text-fill-color: transparent;}

These properties doesn't work on firefox so its not such big deal losing them:). Here example with different technique link

edited May 23 '17 at 10:29

Community

1
1

answered Mar 03 '17 at 12:37

Danail Videv

763
6
16

Only one of my class statements in CSS works

4 Answers4