button should get a diffrent color when clicked on but instead the color of all buttons on that page change

问题: I have 50 buttons on a site and when someone slicked on a button I want the color of that button to change but now the color of all the buttons change. ALL THE BUTTONS LI...

问题:

I have 50 buttons on a site and when someone slicked on a button I want the color of that button to change but now the color of all the buttons change.

ALL THE BUTTONS LINK TO THE SAME PAGE

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>


回答1:

Try

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> 

If you want to change color after click in persisten way you can use

a:visited {
  background: red;
}

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

a:visited {
  background: red;
}
<a  class="fe" href="#Z" >Fohnen...</a>
<a class="ae" href="#X" >Snowboarden</a>
<a class="af" href="#Y" >Programmeren</a> <a 
class="da" href="#W" >ING</a>


回答2:

All the links are the same. Try changing the hrefs to different locations and it should behave correctly. The :visited selector works against the href visited in the browser's URL history, not the name.


回答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 Links have Four different states

`: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.

回答4:

These links all go to the same place, so the default "visited" link color will be applied to all buttons.

Instead of classes, change your links to use the hashtag.

For example, change:

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

To:

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

Do this for all the links so they are unique and the "visited" pseudoselctor will work as intended.

Then for the CSS, you can just do:

a:visited {
    background-color: #5ABD9C;
    color: white;
}
  • 发表于 2019-02-21 07:33
  • 阅读 ( 197 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除