Question

从头开始为我的一个项目做这件事。我想在图像上创建悬停效果，然后在顶部显示有关该图像的内容。悬停时图像会变暗，然后内容将显示在其上方。

我遇到的问题是内容偏离其父div的不透明度。如何让子div不受不透明属性的影响？

这是我的HTML：

<div class="featured-home-bg">
            <div class="background-content">
                <div class="featured-home-content">
                    <h2>Home Name</h2>
                    <p>Lorem Ipsum leo dormit tan loius ov noetermit.</p>
                </div><!--- end featured-home-content --->
            </div><!--- end background-content --->
</div><!--- end featured-home-bg --->

这是我的CSS：

.featured-home-bg {
    background: url(../images/home-1.jpg) no-repeat;
    background-size: 400px;
    height: 300px;
}

.background-content {
    background-color: #000;
    height: 225px;
    width: 400px;
    opacity: 0;
}

.background-content:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.50s ease-in-out;
    -moz-transition: opacity 0.50s ease-in-out;
    -ms-transition: opacity 0.50s ease-in-out;
    -o-transition: opacity 0.50s ease-in-out;
}

.featured-home-content {
    width: 400px;
    height: 300px;
}

.featured-home-content:hover {
    cursor: pointer;
    width: 400px;
    height: 300px;
}

Answer 1

我想你想要这样的代码吗？

.featured-home-bg:hover .background-content {
opacity: 0.6;
}

Answer 2

这里是这样做的方式@HenricÅkesson说，但这里有每个div

HTML

> <div class="image"><!-- image can be placed here --> <div
> class="imagehover">text </div></div>

CSS

.image {    
width: 400px;
height: 400px;
background-color: red;
line-height: 400px;
}
.imagehover{
width: 400px;
height: 400px;
background:; 
opacity:0;
text-align: center;
font-size:20px;
transition: 0.2s ease-in-out;
}
.image:hover .imagehover { 
transition: 0.2s;
opacity:1;
background-color: rgba(0, 0, 0, 0.5);
text-align:justify; 
color:white;
font-size:25px; 
font-weight:700; 
font-family: "apercu",Helvetica,Arial,sans-serif; 
text-align: center;
line-height: 400px;
}

http://jsfiddle.net/d6yhnmnf/5/

尝试在图像悬停时显示内容

2 个答案: