CSS 在悬停时更改链接颜色答案

【问题标题】：CSS Change link color on hoverCSS 在悬停时更改链接颜色
【发布时间】：2020-04-24 19:05:09
【问题描述】：

我使用 VScode 并尝试更改 :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

【问题讨论】：

标签： html css hover mousehover

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

a:悬停{ background-color: // 你的颜色 }

【讨论】：