CSS 更改 hover 上的链接颜色
[英]CSS Change link color on hover
问题描述
I work with VScode and i try to change link color on :hover .
我使用 VScode 并尝试更改:hover上的链接颜色。 Also how can i add grow Hover Effect?另外我怎样才能增加 Hover 效果？ 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 https://codepen.io/shai-goldenberg/pen/jObBzEK
3 个解决方案
解决方案1
4 2020-04-24 19:07:21
Change that to .subareas a:hover to achieve an adequate specifity on hover将其更改为.subareas a: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 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
1 2020-04-24 19:12:20
a:hover { background-color: // your color here } a:hover { background-color: // 你的颜色在这里 }
解决方案3
1 已采纳 2020-04-24 19:23:48
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在悬停时更改链接颜色 - change link color on hover
CSS悬停时更改颜色 - CSS Change color on hover
CSS：在悬停时更改颜色 - CSS: Change color on hover
CSS拼图-分级链接跨度不会在悬停时更改颜色 - CSS Puzzle - Classed Link Span won't change color on hover
IE9链接悬停css颜色改变垂直移位 - IE9 link hover css color change vertical shift
CSS：将鼠标悬停在块上以更改文本颜色和链接 - CSS: hover over block to change text color and link
CSS：悬停时照片变大和文字（链接）改变颜色 - CSS: photo become larger & words(link) change color when hover
如何使用 CSS 和 HTML 更改 hover 上的链接颜色和效果？ - How to change color of link and effect on hover using CSS and HTML?
HTML / CSS - 悬停链接颜色 - HTML / CSS - Hover Link Color
如何在悬停时不改变链接的颜色 - How to not change color of link on hover
相关标签