CSS:在悬停时减轻元素

Question

假设一个元素处于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

我使用box-shadow属性来控制背景颜色的亮度，通过放置半透明覆盖

例子：

.btn {

  background-color: #0077dd;
  
  display: inline-flex;
  align-content: center;
  padding: 1em 2em;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  margin: 0.5em;
  cursor: pointer;
}

.btn.brighten:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}

.btn.darken:hover {
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}

<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>

Answer 4

你应该使用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 5

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

\n\n

HTML：

\n\n

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

\n\n

CSS：

\n\n

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

\n\n

或类似的东西。

\n\n

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

\n\n

为了获得更平滑的结果，请添加 CSS3 过渡：

\n\n

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

\n\n

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

\n\n

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

\n