CODEWITHSUNDEEP
htmlcsshovermousehover
Shai Goldenberg
Shai Goldenberg

Reputation: 46

CSS Change link color on hover

I work with VScode and i try to change link color on :hover. Also how can i add grow Hover Effect ? Here my 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

Upvotes: 0

Views: 122

Answers (3)

Johannes
Johannes

Reputation: 67768

Change that to .subareas a:hover to achieve an adequate specifity on 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>

Upvotes: 4

Sagar Kumar
Sagar Kumar

Reputation: 146

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

Upvotes: 1

Satyendra07
Satyendra07

Reputation: 139

a:hover { background-color: // your color here }

Upvotes: 1

Related Questions