悬停时轻松改变不同背景颜色的背景颜色。

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

- Elyor

---

你介意为内容引入一个额外的 span 元素吗，就像这里一样。这是我能想到的最简单的方法。 (编辑: 原来的 fiddle 是错误的版本。这里是正确的版本。) - Harry

另外，您可能想看一下：https://dev59.com/J2w05IYBdhLWcg3w4125 - Hashem Qolami

Answer 1

最简单的方法是在:hover时向元素应用background-image。可以使用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。

- David Thomas

---

我非常喜欢这种方法，因为它不需要任何额外的元素（真实或虚假）。干得好 :) - Harry

Answer 2

这里有一个代码片段，你应该将你的内容包装在

标签中，这样就可以将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>

- Pepo_rasta

Answer 3

这是一种利用内容堆叠渲染方式的技巧，背景始终在内容下方（即使它属于更高的堆叠）：

fiddle

  div {
      width:100px;
      height:50px;
      z-index:2;
      position:relative;
  }
  .element {
      background-color:#888888;
  }
  .element2 {
      background-color:red;
  }
  .element3 {
      background-color:cyan;
  }
  div:hover:after {
      content:'';
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:white;
      opacity:0.5;
      z-index:-2;
  }

<div class="element">test</div>
<div class="element2">test</div>
<div class="element3">test</div>

如果您对解释感兴趣，请查看此答案。

- maioman

Answer 4

OR YOU CAN TRY THIS CODE ALSO
OR YOU CAN TRY THIS ONE ALSO::

<!DOCTYPE html>
<html>
<head>
<style>
.element{
width:100px;
    height:50px;
    background-color:#888888;
}
.element:hover {
    background-color: yellow;

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

}

.element2:hover {
    background-color: red;
}
</style>
</head>
<body>



<div class="element">

  Content of the DIV

</div>
<div class="element2">
Content of the Div2
</div>


</body>
</html>

- bin