CSS 更改悬停时的 link 颜色

Question

我与 VScode 一起工作，我尝试更改 :hover 上的 link 颜色。另外我怎样才能增加悬停效果？这是我的代码：

.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

Answer 1

将其更改为 .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>

Answer 2

a:悬停{ 背景颜色：//你的颜色在这里 }

Answer 3

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

CSS 更改悬停时的 link 颜色

CSS Change link color on hover

html

css

hover

mousehover