在悬停时减轻背景颜色为不同的背景颜色

Question

我有多个元素,它们的背景颜色彼此不同.喜欢:

<div class="element"> Content of the DIV</div>
<div class="element2"> Content of the DIV</div>

.element{
    width:100px;
    height:50px;
    background-color:#888888;
}
.element2{
    width:100px;
    height:50px;
    background-color:#222222;
}

我想悬停像:

.element:hover, .element2:hover{}

当我将鼠标放在元素上时,只有背景应该更轻一点.我不想使用opacity: 0.4(减轻整个div)或background-color:rgba(50,50,50,0.5);(仅限一种颜色)

的jsfiddle

Answer 1

实现此目的的最简单方法是简单地将background-image元素应用于您的元素:hover.使用CSS渐变(我使用ColorZilla的"Ultimate CSS Gradient Generator"生成):

.element:hover,
.element2:hover,
.element3:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}

.element {
  width: 100px;
  height: 50px;
  background-color: #888888;
}
.element2 {
  width: 100px;
  height: 50px;
  background-color: #222222;
}
.element3 {
  width: 100px;
  height: 50px;
  background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}

<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>

或使用部分透明的图像:

.element:hover,
.element2:hover,
.element3:hover {
  background-image: url(http://i.stack.imgur.com/5udh0.png);
}

.element {
  width: 100px;
  height: 50px;
  background-color: #888888;
}
.element2 {
  width: 100px;
  height: 50px;
  background-color: #222222;
}
.element3 {
  width: 100px;
  height: 50px;
  background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
  background-image: url(http://i.stack.imgur.com/5udh0.png);
}

<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>

这是因为背景属性的"堆叠"顺序; 在background-color坐在后部和background-image"上面"该层位于.

参考文献:

• " 使用CSS渐变,"在MDN.

Answer 2

这是一个Fiddle，您应该将内容包装到 div 中，以便可以应用rgba(255,255,255,0.5)到它们：

.element{
    width:100px;
    height:50px;
    background-color:#888888;
    position:relative;
}
.element2{
    width:100px;
    height:50px;
    background-color:#222222;
    position:relative;
}
.element:hover > div, .element2:hover > div{
    /* what can we put here? */
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
}

<div class="element"><div>Content of the DIV</div></div>
<div class="element2"><div>Content of the DIV</div></div>