Question

我的网页中有多个元素。例如，多个按钮（具有红色背景颜色），链接（具有蓝色背景颜色）等等。

我需要在:hover上更改它们的颜色。目前我这样做：

button{
  background-color: red;
}

button:hover {
   background-color: #c80020;
}

a {
  color: blue;
}

a:hover {
  color: #082767;
  cursor: pointer;
}

<button>button</button>
<a>link</a>

如您所见，我使用的颜色比:hover上的元素颜色更暗。

我只想知道，是不是有任何颜色（或接近）才能使元素比它更暗？我没有任何特定的颜色。实际上我并不关心任何确切的颜色，我只想在:hover上使元素更暗，就这样。有什么建议吗？

Answer 1

您可以使用hsla而不是hex-colors。

示例：

＆＃13;

button{
 background-color: hsla(356, 98%, 46%, 1);
}

button:hover {
  background-color: hsla(356, 98%, 26%, 1);
}

＆＃13;

<button>button</button>

＆＃13;

Answer 2

如果您使用SASS，则可以使用darken方法来实现相同的

SASS方式

button{
  background-color: red;
}

button:hover {
   background-color: darken(red, 10%);
}

CSS整齐地下面（CSS3）

纯CSS方式中最好的，我建议使用 HSLA（Hue Saturation Lightness和alpha），这是一个CSS3功能，您可以查看here。对你而言应该看起来像

button{
 background-color: hsla(0, 100%, 50%, 1);
}

button:hover {
  background-color: hsla(0, 100%, 38%, 1);
}

CSS丑陋的方式（我相信没有人会读到这个）

如果你想要更多的CSS方法，你可以从这里尝试的选项很少

Codepen example

这些包括

添加一个box-shadow＆amp;在悬停时将其删除
添加1px半透明gif＆amp;在悬停时将其删除
创建为psuedo-element＆amp;的背景它是悬停时的不透明度变化

这些更像是根据我和我的黑客行为。我不建议，但选项是开放的： - ）

Answer 3

不，最好的方法是改变颜色，但你可以使用灰度（但我不推荐它）

＆＃13;

button{
  background-color: red;
}

button:hover {
   background-color: #c80020;
}

a {
  color: blue;
}

a:hover {-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

＆＃13;

<button>button</button>
<a>link</a>

＆＃13;

Answer 4

也许这就是你要找的东西：

HTML

<div class="image">
    <div class="overlay"></div>
</div>

CSS

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    position:relative;
}
.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

http://jsfiddle.net/6bjTQ/

如何使元素的颜色更暗：hover？

4 个答案: