为不同的背景颜色在悬停时减轻背景颜色
Posted
技术标签:
【中文标题】为不同的背景颜色在悬停时减轻背景颜色【英文标题】:lighten background color on hover for different background colors 【发布时间】:2015-11-09 18:23:59 【问题描述】:我有多个元素,它们的背景颜色彼此不同。喜欢:
<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
【问题讨论】:
您是否可以为here 之类的内容引入一个额外的span
元素。这是我能想到的最简单的。 (编辑:原来的小提琴是错误的版本。Here 是正确的。)
另外你可能想看看:***.com/questions/6962432/…
【参考方案1】:
这是一个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>
【讨论】:
【参考方案2】:这是一种使用堆叠内容呈现方式的技巧,背景总是在内容下方(即使它属于更高的堆栈):
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>
如果您对解释感兴趣,请查看answer
【讨论】:
【参考方案3】:实现这一点的最简单方法是简单地将background-image
应用于:hover
上的元素。使用 CSS 渐变(我使用 ColorZilla's "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
位于该层的“上方”。
参考资料:
“Using CSS Gradients”MDN。【讨论】:
我非常喜欢这种方法,因为它不需要任何额外的元素(真实的或伪的)。做得很好:)【参考方案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>
【讨论】:
以上是关于为不同的背景颜色在悬停时减轻背景颜色的主要内容,如果未能解决你的问题,请参考以下文章