Question

我无法在href中添加多功能性。

这是我的代码：

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;}

现在我正试图通过将所需的样式属性设置为一个名为magic的类来实现，但似乎只有：hover有效。我试图按名称设置属性，但效果是相同的 - 只有悬停工作。

所以我希望每当我将鼠标悬停在它上面时，链接按钮都会执行不同的操作，只要它处于活动状态等等，但似乎只有my：hover语句有效且我不知道为什么。

谢谢。

Answer 1

我注意到您的</a>未正确关闭。尝试修复它。

Answer 2

@ХристиянХристов使用下面的代码可能对它有所帮助。

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;
    }

Answer 3

您没有常规a:link州的CSS规则 - 这是故意的吗？

这样，当您将光标移到链接（:hover）上时，或者在您访问了链接页面并返回到原始页面（:visited）之后，您才会看到更改，或者在您点击链接之后和打开新页面之前的很短时间内（:active）。但常规链接将以默认设置显示。如果您希望更改，请使用选择器a.magic:link

创建另一个规则（或向现有规则之一添加第二个选择器）

Answer 4

摆脱这一切。尝试用颜色，仅背景实现相同的效果

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

这些属性在firefox上不起作用，所以它没有那么大的丢失它们:)。这里使用不同的技术link

CSS中只有一个我的类语句有效

4 个答案: