更改背景颜色不透明度而不更改背景图像不透明度

Question

我想在用户将鼠标悬停时增加按钮的背景颜色亮度。但无论按钮的颜色如何，我都希望这样做。贝娄，你可以看到四个按钮。只有最后一个有效，因为它有:hover处理程序显式配置为黄色。

.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    background-color:black;
    cursor: pointer;
}
.hoverme:hover .inner {
    /*
   Pseudocode:
     background-color-opacity: 1;
    */
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
}

.hoverme.red .inner {
    background-color: rgba(255,0,0,.9);
}
.hoverme.green .inner {
    background-color: rgba(0,200,0,.9);
}
.hoverme.yellow .inner {
    background-color: rgba(250,240,0,.9);
}

.hoverme.yellow.works-but-not-nice:hover .inner {
    background-color: rgba(250,240,0,1);
}

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>

<div class="hoverme yellow works-but-not-nice"><div class="inner">this works</div></div>

所以我想改变背景颜色的不透明度，无论它是黄色，红色还是其他什么。背景图像或内容应始终完全不透明。

在不添加更多div元素的情况下执行此操作的加分点。

Answer 1

在这种情况下，我会考虑使用CSS变量来定义我在悬停时更改的不透明度的值：

:root {
  --opacity:0.8;
}
.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    background-color:black;
    cursor: pointer;
}
.hoverme:hover .inner {
   --opacity:1;
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
}

.hoverme.red .inner {
    background-color: rgba(255,0,0,var(--opacity));
}
.hoverme.green .inner {
    background-color: rgba(0,200,0,var(--opacity));
}
.hoverme.yellow .inner {
    background-color: rgba(250,240,0,var(--opacity));
}

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>

Answer 2

＆＃13;

＆＃13;

.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    background-color:black;
    cursor: pointer;
}
.hoverme:hover .inner {
  opacity: 1 !important;
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
}

.hoverme.red .inner {
    background-color: rgb(255,0,0);
    opacity: .9;
}
.hoverme.green .inner {
    background-color: rgb(0,200,0);
    opacity: .9;
}
.hoverme.yellow .inner {
    background-color: rgb(250,240,0);
    opacity: .9;
}

＆＃13;

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

对于＆＃39; .hoverme .inner＆＃39;添加＆＃39;背景：rgba（0,0,0,0.2）＆＃39;对于＆＃39; .hoverme：hover .inner＆＃39;添加＆＃39;背景：rgba（0,0,0,0）＆＃39; - 它会为内部元素添加透明的黑色背景，并在悬停时将此背景的不透明度设置为0。然后，每个背景颜色都会添加到每个＆＃39; hoverme＆＃39;元素，而不是内心的元素。并删除所有不透明度规则等。完整代码如下：

＆＃13;

＆＃13;

func isMarkerWithinScreen(marker: GMSMarker) -> Bool {
    let region = self.mapView.projection.visibleRegion()
    let bounds = GMSCoordinateBounds(region: region)
    return bounds.contains(marker.position)
}

＆＃13;

.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    cursor: pointer;
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
    background: rgba(0,0,0,0.2);
}
.hoverme:hover .inner {
    background: rgba(0,0,0,0);
}
.hoverme.red {
    background-color: rgb(255,0,0);
}
.hoverme.green {
    background-color: rgb(0,200,0);
}
.hoverme.yellow {
    background-color: rgb(250,240,0);
}

＆＃13;

＆＃13;

＆＃13;