当我将鼠标悬停在图像上方的某些文本上时，如何阻止图像失去其不透明属性？

Question

所以我试图让图像变得不透明以在其背后显示黑色背景并在我将鼠标悬停在它上面时显示一些文本，但是当我将鼠标悬停在文本上时图像不再不透明。

有没有办法阻止这种情况发生？

抱歉，如果我的问题有点含糊。这是我的代码示例，可能会使我正在尝试做的事情更加明显。 http://jsfiddle.net/0vvsbyjw/1/

这是我的 html

<article>
    <div id="image-wrap">
        <a href="recipe.html"><img src="https://theecosexuals.sites.ucsc.edu/wp-content/uploads/sites/94/2015/01/Planet_Earth.jpg" alt="Earth"></a>
        <a href="recipe.html"><h2>TEXT</h2></a>
    </div>
</article>

这是我的 css

article {

position:relative;

}

article img {

display:block;
width:100%;

}

article #image-wrap {

background-color:#000;
z-index:-50
}

article img:hover{

opacity:0.6;
z-index:20;

}

article h2{

font-size:2em;
color:#FFF;
position: absolute;
top:40%;
left:0px;
right:2%;
text-align:center;
vertical-align:middle;
z-index:-20;


}

article:hover h2{

font-size:2em;
color:#FFF;
position: absolute;
top:40%;
left:0px;
right:2%;
text-align:center;
    vertical-align:middle;
    z-index:1;


}

Answer 1

鼠标悬停在文章上可以使效果出现，所以更改：

article img:hover{
    opacity:0.6;
    z-index:20;
}

与：

article:hover img{
    opacity:0.6;
    z-index:20;
}

jsfiddle

当我将鼠标悬停在图像上方的某些文本上时，如何阻止图像失去其不透明 属性？

How can I stop an image from losing its opaque property when I hover over some text above it?

html

css

text

image

hover

当我将鼠标悬停在图像上方的某些文本上时，如何阻止图像失去其不透明属性？