Je travaille avec VScode et j'essaie de changer la couleur du lien sur :hover. Aussi, comment puis-je ajouter un effet Hover Grow? Voici mon code:

.subareas a.link {
  margin: 0 0 10px 10px;
  float: right;
  height: 30px;
  line-height: 29px;
  min-width: 117px;
  text-align: center;
  display: inline-block;
  border: 1px solid #61397f;
  color: #61397f;
  border-radius: 5px;
  padding: 0 5px;
}

.subareas :hover {
  background-color: #9D3B76;
  color: white;
}
<div class="subareas">
  <a id="WestGalil" class="link" href="WestGalil">WestGalil</a>
  <a id="UpperGalilee" class="link" href="UpperGalileer">UpperGalileer</a>
  <a id="lowerGalilee" class="link" href="lowerGalilee">lowerGalilee</a>
  <a id="ZikhronYaakov" class="link" href="ZikhronYaakov">ZikhronYaakov</a>
</div>

https://codepen.io/shai-goldenberg/pen/jObBzEK

0
Shai Goldenberg 24 avril 2020 à 22:05

3 réponses

Meilleure réponse
.subareas a.link {
  margin: 0 0 10px 10px;
  float: right;
  height: 30px;
  line-height: 29px;
  min-width: 117px;
  text-align: center;
  display: inline-block;
  border: 1px solid #61397f;
  color: #61397f;
  border-radius: 5px;
  padding: 0 5px;
}

.subareas a.link:hover {
  background-color: #9D3B76;
  color: white;
}
<div class="subareas">
  <a id="WestGalil" class="link" href="WestGalil">WestGalil</a>
  <a id="UpperGalilee" class="link" href="UpperGalileer">UpperGalileer</a>
  <a id="lowerGalilee" class="link" href="lowerGalilee">lowerGalilee</a>
  <a id="ZikhronYaakov" class="link" href="ZikhronYaakov">ZikhronYaakov</a>
</div>
.subareas a.link {
  margin: 0 0 10px 10px;
  float: right;
  height: 30px;
  line-height: 29px;
  min-width: 117px;
  text-align: center;
  display: inline-block;
  border: 1px solid #61397f;
  color: #61397f;
  border-radius: 5px;
  padding: 0 5px;
}

.subareas a.link:hover {
  background-color: #9D3B76;
  color: white;
}
<div class="subareas">
  <a id="WestGalil" class="link" href="WestGalil">WestGalil</a>
  <a id="UpperGalilee" class="link" href="UpperGalileer">UpperGalileer</a>
  <a id="lowerGalilee" class="link" href="lowerGalilee">lowerGalilee</a>
  <a id="ZikhronYaakov" class="link" href="ZikhronYaakov">ZikhronYaakov</a>
</div>
1
Sagar Kumar 24 avril 2020 à 19:35

Remplacez-le par .subareas a:hover pour obtenir une spécificité adéquate au survol

.subareas a.link {
  margin: 0 0 10px 10px;
  float: right;
  height: 30px;
  line-height: 29px;
  min-width: 117px;
  text-align: center;
  display: inline-block;
  border: 1px solid #61397f;
  color: #61397f;
  border-radius: 5px;
  padding: 0 5px;
}

.subareas a:hover {
  background-color: #9D3B76;
  color: white;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<div class="subareas">

  <a id="WestGalil" class="link" href="WestGalil">WestGalil</a>
  <a id="UpperGalilee" class="link" href="UpperGalileer">UpperGalileer</a>
  <a id="lowerGalilee" class="link" href="lowerGalilee">lowerGalilee</a>
  <a id="ZikhronYaakov" class="link" href="ZikhronYaakov">ZikhronYaakov</a>
</div>

</html>
4
Johannes 24 avril 2020 à 20:58

A: hover {background-color: // votre couleur ici}

1
Satyendra07 24 avril 2020 à 19:12