Javascript 仅更改父对象的不透明度

请注意，这不是一个重复的问题，我已经研究了stackoverflow中所有可能的问题，但没有得到答案

我正在看这个网站，尤其是其中的“最近的项目”部分。当我将鼠标悬停在图像上时，只有背景

元素的不透明度发生变化，而内部的

元素则没有变化。这是怎么做到的

---

请注意，我曾尝试使用jQuery更改不透明度。它会更改内部所有元素的不透明度，例如，在本例中，它会更改

和

元素的不透明度。

它们更改的不透明度不在

元素中。它们使用CSS更改

中的

之前的伪元素

：

content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: .15;

这意味着，该元素放置父级
的全宽和全高，但不包含子级
<代码>：before

和

是并行的。

它们使用了

:before

和

:hover

伪选择器的组合。当有人将鼠标悬停在子元素上时，会修改

：before

伪元素的

不透明度

例子
HTML

有很多方法可以做到这一点，也许最简单的方法是在图像周围使用一个带填充的包装器元素，然后使用CSS3在
：hover

<div class="image">
    <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg"/>
</div>

您不能仅更改父级的不透明度，这真的无法做到，您唯一能做的就是使用RGBA颜色，但您链接到的页面使用CSS3和多个元素，没有jQuery动画的不透明度？我不是说他们使用jQuery或其他任何东西来完成。我在问他们是怎么做到的。我使用了jquery，但使用起来很自然。如何完成他们已经完成的工作您可以使用任何浏览器调试工具轻松查看页面并找出答案。在使用alpha的同时使用colorsIt这真的很简单->
.parent { position: relative; }
.child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .15;
}
.child:hover:before { opacity: .5; }

<div class="image">
    <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg"/>
</div>

.image {
    padding: 50px; 
    position: relative; 
    top: 100px; 
    left: 100px; 
    height: 200px; 
    width: 300px;
    -webkit-transition: background 1s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.image:hover {
    background: rgba(255,255,255,0.4);
}

.image img {
    height: 200px; 
    width: 300px;
}