如何讓元素的顏色更加黑暗：懸停？

我在我的網頁中有多個元素。例如多個按鈕（其具有紅色背景色），鏈接（其具有藍色背景色）等等。如何讓元素的顏色更加黑暗：懸停？

我需要改變它們的顏色: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上變得更暗，就是這樣。任何建議？

來源

2016-09-16 Shafizadeh

使用一些動態語言如SCSS。 –

我相信這已經[問之前]（http://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript）。 SASS和LESS有'darken（）'和'lighten（）'功能。 'a {color：＃FC0; } a：hover {color：darken（＃FC0，5％）;'。 – hungerstar

@MuhammadUsman只是爲了那個?! –

您可以使用hsla而不是十六進制顏色。

例如：

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

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

<button>button</button>

來源

2016-09-16 14:11:46

如果您使用SASS，你可以使用darken方法來達到同樣的

SASS遠低於

button{ 
    background-color: red; 
} 

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

CSS下方非常簡潔的方式（CSS3）

在純粹的CSS方式中最好的，我建議使用HSLA（色調飽和亮度和alpha），這是一個CSS3功能，你可以查看here。對您來說應該如下

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

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

CSS醜陋的方式（我相信沒有人會閱讀）

如果你想爲這更多的CSS方法，還有你可以從嘗試幾個選項這裏

Codepen example

這些包括

添加箱陰影&懸停移除
加入1px的半透明的gif &刪除它懸停作爲僞元素創建
背景&它的不透明度變化懸停

這些更像黑客根據我&我不建議，但選項是開放:-)

來源

2016-09-16 14:05:57

好吧，如果OP不使用SASS ... –

然後有幾個醜陋的方式來完成它，而不是我會建議。鏈接與我的答案更新解釋。 –

Thx爲更新儘管雅，它是相當難看... :) –

-1

也許這是你在找什麼：

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/

來源

2016-09-16 14:06:39 Jurntje

這甚至改變了內容而不僅僅是元素。 – eisbehr

@eisbehr這是一個有點爭議的答案是一個最小的例子。雖然不是一個偉大的。 – hungerstar

沒有，最好的辦法是改變顏色，但您可以使用灰階（但我不建議這樣做）

button{ 
 
    background-color: red; 
 
} 
 

 
button:hover { 
 
    background-color: #c80020; 
 
} 
 

 
a { 
 
    color: blue; 
 
} 
 

 
a:hover {-webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    cursor: pointer; 
 
}

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

來源

2016-09-16 14:06:51 Jeanclaude

如何讓元素的顏色更加黑暗：懸停？

回答

相關問題