Question

我有一个<div>元素，它有一个背景图片。最重要的是，我有一些隐藏的文字，但当用户将鼠标悬停在文本将显示的<div>元素上时，<div>不透明度会降低。我的问题是，当你将div上面的所有元素都悬停在div上时，也会改变不透明度。我查看了stackoverflow，看看是否有人遇到同样的问题，但我找到的只是RGBA使用背景颜色（不是图像）的答案。

这是我的css：

    .pic{
      background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
} 
.textstuff{
    visibility:hidden;
}
.pic:hover .textstuff{
    visibility:visible;
    color:black;
}
.pic:hover{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

HTML HERE：

    <div class="pic" style="height:150px;width:150px;">
       <div class="textstuff">this is text</div>
    </div>

Answer 1

无论何时更改父元素的不透明度，它都会自动应用于所有子元素。解决这个问题的唯一方法是不要让opacified元素成为文本的父元素。最好将background元素重构为该容器中任何其他元素的兄弟，并给它一些absolute定位。

Answer 2

尝试使用:before伪元素：

.pic {
    position: relative;
}

.pic:before {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
} 

.textstuff{
    visibility:hidden;
}

.pic:hover .textstuff{
    visibility:visible;
    color:black;
}

.pic:hover:before{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

Answer 3

.pic类中的任何元素都会收到不透明度，为了不接收它，你必须为pic创建一个包装器并将.textstuff放在该包装器兄弟中.pic

<div class="pic_wrapper">
    <div class="pic"></div>
    <div class="textstuff"></div>
</div>

Answer 4

我能够通过包装它并将.pic设置为绝对位置来实现此功能。这样它填满了背景但不影响文本：

<div class="wrapper">
    <div class="pic"></div>
    <div class="textstuff">
        <p>This is the textstuff</p>
    </div>
</div>

CSS代码：

.wrapper {
    position: relative;
}

.pic {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.textstuff {
    visibility:hidden;
}
.pic:hover ~ .textstuff {
    visibility:visible;
    color:black;
}
.pic:hover {
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

这是一个显示示例的小提琴：

http://jsfiddle.net/jqxw5ajz/

用父图像改变不透明度的子元素

4 个答案: