CSS Изменить цвет ссылки при наведении - PullRequest
Новая
       68

CSS Изменить цвет ссылки при наведении

0 голосов
/ 24 апреля 2020

Я работаю с VScode и пытаюсь изменить цвет ссылки на :hover. Также, как я могу добавить растущий эффект Hover? Вот мой код: 

.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

Ответы [ 3 ]

4 голосов
/ 24 апреля 2020

Измените это значение на .subareas a:hover для достижения адекватной специфичности при наведении 

.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>
1 голос
/ 24 апреля 2020 

.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 голос
/ 24 апреля 2020

a: hover {background-color: // ваш цвет здесь}

...