Question

我有一个覆盖在图像上的叠加层，当我将鼠标悬停在图像上时，它会使图像变暗。我也有文本也应该显示在图像上，但它不会显示在鼠标上。我在这里错过了什么吗？

HTML

<div class="square">
    <div class="info">
        <h2>This is a test</h2>
    </div>
    <div class="bg-image img-responsive square" style="background-image:url(http://lorempixel.com/500/500/sports/)"></div>
</div>

CSS

.square{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.bg-image{
    background-position: center;
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255,255,255,1);
    transition: color .25s ease;
}

.bg-image:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity .25s ease;
    background-color: rgba(0,0,0,0.75);
}

.info{
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    pointer-events: none;
    height: 200px;
    text-align: center;
    color: rgba(255,255,255,1);
    opacity: 0;
    transition: opacity .25s ease;
}

.bg-image:hover:before, .bg-image:hover:before .info{
    opacity: 1;
}

Answer 1

您是否正在寻找this

之类的内容

这是纯粹的CSS，只需添加此规则：

.square:hover > .info:not(:hover){
    opacity: .4;
}

每当您将父级.square元素悬停，并且您没有悬停文本时，即您正在悬停图像，然后根据需要显示不透明度的文本。

希望这是您正在寻找的解决方法

.square{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.bg-image{
    background-position: center;
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    background-image:url(http://lorempixel.com/500/500/sports/);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255,255,255,1);
    transition: color .25s ease;
}

.bg-image:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity .25s ease;
    background-color: rgba(0,0,0,0.75);
}

.info{
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    pointer-events: none;
    height: 200px;
    text-align: center;
    color: rgba(255,255,255,1);
    opacity: 0;
    transition: opacity .25s ease;
}

.bg-image:hover:before, .bg-image:hover:before .info{
    opacity: 1;
}

.square:hover > .info:not(:hover){
    opacity: .4;
}

<div class="square">
    <div class="info">
        <h2>This is a test</h2>
    </div>
    <div class="bg-image img-responsive square"></div>
</div>

鼠标悬停时不显示文字

1 个答案: