CSS：减轻悬停元素(CSS: lighten an element on hover)

假设一个元素是100％饱和度，不透明度，等等......我怎么能有它的背景成为当它盘旋稍轻？

用例是，我允许用户以任何元素悬停在一个页面上。我不想去走一走确定每个颜色相当于80％的不透明度。

一种方法是改变opacity: 0.4 ，但我只想要的背景变化。

Answer 1:

这是很久以前的事，但你可以做这样的事情：

.element {
    background-color: red;
}
.element:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

您可以更改100px的成你想要的数字。我把一个大的覆盖整个元素。

这不是一个非常漂亮的解决方案，但它的工程！

下面的例子： http://jsfiddle.net/6nkh3u7k/5/

Answer 2:

这里有一个简单的方法来做到这一点：

.myElement:hover {
  filter: brightness(150%);
}

Answer 3:

应该使用的RGBA方法（ background-color:rgba(R,G,B,alpha); ）来这样做：

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

小提琴

如果你强烈需要，使其在IE8工作或更低的太过这里是怎么弄：

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

注意， startColorstr和endColorstr值是建立这样#AARRGGBB （其中AA是Alpha通道），且必须是相同的，如果你不想从颜色到另一个渐变效果。

Answer 4:

为此，您可以只使用CSS filter: brightness(); 但目前仅支持在WebKit浏览器。见http://jsfiddle.net/jSyK7/

Answer 5:

我会用:after伪元素，而不是传统的背景。它在IE8，如果支持rgba()不是。

HTML：

<div class="hoverme">
    <p>Lorem ipsem gimme a dollar!</p>
</div>

CSS：

.hoverme {
    position: relative;
}
.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
}

.hoverme:hover:after {
    background-color: #ddd;
}

或类似的东西。

http://caniuse.com/#search=%3Aafter

对于平滑的结果，增加一个CSS3过渡：

.hoverme:after {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

上面的代码片段被复制并粘贴从http://css3please.com

http://jsfiddle.net/ghodmode/6sE9E/