Question

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

我正在查看网站http://riviera-black.cmsmasters.net/，尤其是“最近的项目”部分。当我将鼠标悬停在图片上时，只有背景<article>元素的不透明度会发生变化，而内部的<figure>元素却不会变化。这是怎么做到的？

请注意我尝试使用jQuery为我更改不透明度，它会更改内部所有元素的不透明度，例如在这种情况下，它会更改<article>和<figure>元素的不透明度。

Answer 1

它们不会在<article>元素中更改不透明度。他们使用CSS更改IN :before的伪元素<article>：

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

表示该元素放置父<article>的完整宽度和高度，但不包含<article>个子元素。 :before和<figure>并列。

Answer 2

有很多方法可以做到这一点，也许最简单的方法是使用填充在图像周围使用包装元素，然后在:hover上使用CSS3为背景设置动画

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

CSS

.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;
}

FIDDLE

Answer 3

他们使用了:before和:hover伪选择器的组合。当某人悬停在子元素上时，:before伪元素的opacity会被修改。

实施例

HTML

<div class="parent">
    <div class="child">Hover me!</div>
</div>

CSS

.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; }

Working example

仅更改父级的不透明度

3 个答案:

实施例