Css 悬停时为不同背景色点亮背景色_Css

Css 悬停时为不同背景色点亮背景色

css

Css 悬停时为不同背景色点亮背景色,css,Css,我有多个元素，它们的背景颜色彼此不同。比如： <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;

我有多个元素，它们的背景颜色彼此不同。比如：

<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;
}

当我将鼠标移到元素上时，只有背景应该稍微亮一点。我不想使用

不透明度：0.4

（使整个div变亮）或

背景色：rgba（50,50,50,0.5）（仅适用于一种颜色）
这里是一个示例，您应该将内容包装到div中，这样您就可以对它们应用rgba（255255255,0.5）
：

.element{
宽度：100px；
高度：50px；
背景色：#888888；
位置：相对位置；
}
.要素2{
宽度：100px；
高度：50px；
背景色：#22222；
位置：相对位置；
}
.element:hover>div，.element 2:hover>div{
/*我们可以在这里放什么*/
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
背景色：rgba（255255,0.5）；
}
DIV的内容
DIV的内容

，也可以尝试此代码
或者你也可以试试这个：
.元素{
宽度：100px；
高度：50px；
背景色：#888888；
}
.元素：悬停{
背景颜色：黄色；
}
.要素2{
宽度：100px；
高度：50px；
背景色：#22222；
}
.要素2：悬停{
背景色：红色；
}
DIV的内容
第2分部的内容

实现这一点的最简单方法是将

背景图像

应用于

：hover

上的元素。或者使用CSS渐变（我使用以下方法生成）：

.element{
宽度：100px；
高度：50px；
背景色：#888888；
}
.要素2{
宽度：100px；
高度：50px；
背景色：#22222；
}
.要素3{
宽度：100px；
高度：50px；
背景色：#ff9900；
}
.元素：悬停，
.要素2：悬停，
.要素3：悬停{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#ffffff+0，ffffff+100和0.5+0,0.5+100*/
背景图像：-moz线性梯度（顶部，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.5）100%）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0%、rgba（255、255、255、0.5））、颜色停止（100%、rgba（255、255、255、0.5））；
背景图像：-webkit线性渐变（顶部，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.5）100%）；
背景图像：-o-线性梯度（顶部，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.5）100%）；
背景图像：-ms线性渐变（顶部，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.5）100%）；
背景图像：线性渐变（至底部，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.5）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#80ffffff'，endColorstr='#80ffffff'，GradientType=0）；
}

DIV的内容 DIV的内容

DIV的内容这是一个使用堆叠内容呈现方式的技巧，背景始终位于内容下方（即使它属于更高的堆栈）：

div{
宽度：100px；
高度：50px；
z指数：2；
位置：相对位置；
}
.元素{
背景色：#888888；
}
.要素2{
背景色：红色；
}
.要素3{
背景色：青色；
}
div:悬停：之后{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：白色；
不透明度：0.5；
z指数：-2；
}

测试
测试
test

您是否可以为以下内容引入额外的

span

元素。这是我能想到的最简单的。（编辑：原来的fiddle版本是错误的。是正确的。）另外，您可能想看看：我非常喜欢这种方法，因为它不需要任何额外的元素（真实或伪）。做得好：）

.element:hover, .element2:hover{}

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>

.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);
}