Question

我在网站上有50个按钮，当某人在某个按钮上滑动时，我希望该按钮的颜色发生变化，但是现在所有按钮的颜色都会发生变化。

所有按钮都链接到同一页面

body {
  background-color: #2D3E50
}

h1 {
  font-size: 7vw;
  color: white;
}

h2 {
  font-size: 5vw;
  color: white;
  font-weight: normal;
}

div {
  text-align: center;
  text-align-last: center;
}

a:link {
  background-color: #F19B42;
  padding: 15px 16px;
  align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px;
  margin-right: 0px;
  font-family: monospace;
  font-size: 15px;
  color: white
}

.a:visited {
  background-color: #5ABD9C;
  color: white;
}

.ab:visited {
  background-color: #5ABD9C;
  color: white;
}

.ac:visited {
  background-color: #5ABD9C;
  color: white;
}

.ad:visited {
  background-color: #5ABD9C;
  color: white;
}

.ae:visited {
  background-color: #5ABD9C;
  color: white;
}

.af:visited {
  background-color: #5ABD9C;
  color: white;
}

.ag:visited {
  background-color: #5ABD9C;
  color: white;
}

.d:visited {
  background-color: #5ABD9C;
  color: white;
}

.da:visited {
  background-color: #5ABD9C;
  color: white;
}

.db:visited {
  background-color: #5ABD9C;
  color: white;
}

.dc:visited {
  background-color: #5ABD9C;
  color: white;
}

.dd:visited {
  background-color: #5ABD9C;
  color: white;
}

.de:visited {
  background-color: #5ABD9C;
  color: white;
}

.df:visited {
  background-color: #5ABD9C;
  color: white;
}

.dg:visited {
  background-color: #5ABD9C;
  color: white;
}

.e:visited {
  background-color: #5ABD9C;
  color: white;
}

.ea:visited {
  background-color: #5ABD9C;
  color: white;
}

.eb:visited {
  background-color: #5ABD9C;
  color: white;
}

.ec:visited {
  background-color: #5ABD9C;
  color: white;
}

.ed:visited {
  background-color: #5ABD9C;
  color: white;
}

.ee:visited {
  background-color: #5ABD9C;
  color: white;
}

.ef:visited {
  background-color: #5ABD9C;
  color: white;
}

.eg:visited {
  background-color: #5ABD9C;
  color: white;
}

.c:visited {
  background-color: #5ABD9C;
  color: white;
}

.ca:visited {
  background-color: #5ABD9C;
  color: white;
}

.cb:visited {
  background-color: #5ABD9C;
  color: white;
}

.cc:visited {
  background-color: #5ABD9C;
  color: white;
}

.cd:visited {
  background-color: #5ABD9C;
  color: white;
}

.ce:visited {
  background-color: #5ABD9C;
  color: white;
}

.cf:visited {
  background-color: #5ABD9C;
  color: white;
}

.cg:visited {
  background-color: #5ABD9C;
  color: white;
}

.b:visited {
  background-color: #5ABD9C;
  color: white;
}

.ba:visited {
  background-color: #5ABD9C;
  color: white;
}

.bb:visited {
  background-color: #5ABD9C;
  color: white;
}

.bc:visited {
  background-color: #5ABD9C;
  color: white;
}

.bd:visited {
  background-color: #5ABD9C;
  color: white;
}

.be:visited {
  background-color: #5ABD9C;
  color: white;
}

.bf:visited {
  background-color: #5ABD9C;
  color: white;
}

.bg:visited {
  background-color: #5ABD9C;
  color: white;
}

.f:visited {
  background-color: #5ABD9C;
  color: white;
}

.fa:visited {
  background-color: #5ABD9C;
  color: white;
}

.fb:visited {
  background-color: #5ABD9C;
  color: white;
}

.fc:visited {
  background-color: #5ABD9C;
  color: white;
}

.fd:visited {
  background-color: #5ABD9C;
  color: white;
}

.fe:visited {
  background-color: #5ABD9C;
  color: white;
}

.ff:visited {
  background-color: #5ABD9C;
  color: white;
}

.fg:visited {
  background-color: #5ABD9C;
  color: white;
}

.fh:visited {
  background-color: #5ABD9C;
  color: white;
}

.fi:visited {
  background-color: #5ABD9C;
  color: white;
}

.fj:visited {
  background-color: #5ABD9C;
  color: white;
}

.fk:visited {
  background-color: #5ABD9C;
  color: white;
}

.fl:visited {
  background-color: #5ABD9C;
  color: white;
}

.fm:visited {
  background-color: #5ABD9C;
  color: white;
}

body {
  font-family: monospace;
}

<html>

<head>
  <title>Dolf 50!</title>
  <link rel="stylesheet" href="Opdrachten.css">
</head>

<body>

  <h1 class="title">Dolf, golf, wolf.</h1>
  <h2> Hieronder zie je alle woorden. Klik op het woord als je de foto hebt gemaakt waarvan je denkt dat deze het woord goed uitbeeld.</h2>

  <a class="fe" href="./opdrachtclick.html">Fohnen...</a>
  <a class="ae" href="./opdrachtclick.html">Snowboarden</a>
  <a class="af" href="./opdrachtclick.html">Programmeren</a> <a class="da" href="./opdrachtclick.html">ING</a> <a class="ag" href="./opdrachtclick.html">Arduino/pi/dialog flow etc.</a> <a class="e" href="./opdrachtclick.html">Leren en inspireren</a>
  <a
    class="f" href="./opdrachtclick.html">Klussen / Doe het zelven</a>
    <a class="b" href="./opdrachtclick.html">Nieuwe gadgets</a> <a class="ba" href="./opdrachtclick.html">Famillie</a> <a class="ea" href="./opdrachtclick.html">Non-alcohol</a> <a class="fh" href="./opdrachtclick.html">Dushi</a> <a class="fa" href="./opdrachtclick.html">Musea en culturele uitjes</a>

    <a class="ab" href="./opdrachtclick.html">Zeilen</a> <a class="d" href="./opdrachtclick.html">Innovaties</a> <a class="ac" href="./opdrachtclick.html">Reizen</a> <a class="cd" href="./opdrachtclick.html">Goede vader</a>
    <a class="ad" href="./opdrachtclick.html">Fotografie</a>
    <a class="db" href="./opdrachtclick.html">Vakantie</a>
    <a class="bb" href="./opdrachtclick.html">Jeugd van tegenwoordig</a> <a class="c" href="./opdrachtclick.html">V90</a> <a class="ec" href="./opdrachtclick.html">Rotterdam</a> <a class="eb" href="./opdrachtclick.html">Marathon NY rennnen</a>
    <a class="fb" href="./opdrachtclick.html">Elektrisch fietsen </a>
    <a class="fi" href="./opdrachtclick.html">Kannikaler </a>
    <a class="bc" href="./opdrachtclick.html">Gezin </a> <a class="ca" href="./opdrachtclick.html">Oudercommissie ATC</a> <a class="dc" href="./opdrachtclick.html">Meisjesvoetbal</a> <a class="ad" href="./opdrachtclick.html">Curacao</a>
    <a class="fc" href="./opdrachtclick.html">Mearlant Lyceum</a>
    <a class="fj" href="./opdrachtclick.html">Blote voeten</a> <a class="fk" href="./opdrachtclick.html">Kruidvat</a>
    <a class="bd" href="./opdrachtclick.html">Emilie & Quirijn</a> <a class="cb" href="./opdrachtclick.html">Luceline</a> <a class="dd" href="./opdrachtclick.html">Jansje</a> <a class="ed" href="./opdrachtclick.html">Netflix</a> <a class="fd" href="./opdrachtclick.html">Amazon</a>
    <a class="be" href="./opdrachtclick.html">Aanbiedingen kopen</a> <a class="cc" href="./opdrachtclick.html">Grapjes maken</a> <a class="de" href="./opdrachtclick.html">Thee</a> <a class="ef" href="./opdrachtclick.html">Lekker snoepen</a> <a class="a"
      href="./opdrachtclick.html">Golfen</a>
    <a class="fl" href="./opdrachtclick.html">Op pad gaan</a>
    <a class="bf" href="./opdrachtclick.html">Snurken</a> <a class="df" href="./opdrachtclick.html">Fijne echtgenoot</a> <a class="eg" href="./opdrachtclick.html">Detje, Jan, Ma & Pa, Charlotte</a> <a class="fg" href="./opdrachtclick.html">Op Agile wijze zaken aanpakken</a>

    <a class="bg" href="./opdrachtclick.html">Slordig</a> <a class="ce" href="./opdrachtclick.html">Washington Post</a> <a class="dg" href="./opdrachtclick.html">Curacaose Pastechi</a> <a class="fm" href="./opdrachtclick.html">Lief</a>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</body>


</html>

Answer 1

尝试

TypeError: can only concatenate list (not "str") to list

a:focus {
  background: yellow;
}

a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:focus {
  background: yellow;
}

如果您要以持久方式单击后更改颜色，可以使用

<a  class="fe" href="#A" >Fohnen...</a>
<a class="ae" href="#B" >Snowboarden</a>
<a class="af" href="#C" >Programmeren</a> <a 
class="da" href="#D" >ING</a>

a:visited {
  background: red;
}

a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:visited {
  background: red;
}

Answer 2

所有链接都相同。尝试将href更改为不同的位置，它应该可以正常运行。 :visited选择器针对浏览器URL历史记录中访问的href而不是名称。

Answer 3

a:link {
  color: #FF0000;
  text-decoration: none;
}

a:visited {
   color: #00FF00;
}
a:hover {
  color: #FF00FF;
  text-decoration: underline;
}
a:active {
  color: #0000FF;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lets mess around</title>
 
</head>
<body>
  <p><a href="#">Awesome</a></p>
</body>
</html>

CSS链接具有四种不同的状态

`:link`,`:visited`,`:hover`, `:active` 

a:link -Styles links that have not been visited.
a:visited -styles a link that has been visited but mouse pointer isn't there.
a:hover-styles a link when a mouse pointer is on the element.
a:active-styles a link that has been clicked and mouse is on top of it.

Answer 4

这些链接都转到同一位置，因此默认的“已访问”链接颜色将应用于所有按钮。

代替类，更改您的链接以使用井号。

例如，更改：

<a  class="fe" href="./opdrachtclick.html" >Fohnen...</a>

收件人：

<a  class="fe" href="./opdrachtclick.html#fe" >Fohnen...</a>

对所有链接执行此操作，以使它们唯一，并且“访问的”伪选择器将按预期工作。

然后使用CSS，您可以执行以下操作：

a:visited {
    background-color: #5ABD9C;
    color: white;
}

单击时，按钮应具有不同的颜色，但是该页面上所有按钮的颜色都会改变

4 个答案: