html - 鼠标悬停不显示文字

Question

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

http://jsfiddle.net/cryycw3n/

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>