悬停时，另一层移动，如果该层悬停，则悬停停止

Question

Hover是一种有趣的，因为在这段代码中，一个新的图层。hide在悬停时出现，因为它过渡它的响应不同，我尝试了不同的东西，如hide: Hover +img{}和其他如果有人知道它，请帮助有任何黑客在这个问题上。

事情是有两个层，第一层应该淡化不透明度，另一层过渡与动画，只有文字。也就是。hide Class但是如果我悬停在。hide Class上悬停时，会产生问题，

现在我使用与z索引不同，但然后文本隐藏在图像后面。

.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}

.catalog img:hover{

transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog img:hover + .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}

<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>

Answer 1

这个问题的发生是因为你在img:hover上添加了样式，简单地说，默认情况下，这些事件是为选择器本身或它的一个子事件触发的，在这种情况下，图像和div.hide是兄弟，为了避免这种行为，你可以更新你的代码来在catalog:hover上添加这些样式，它是两者的父元素，所以当你在它们上悬停时，你也会在父元素上悬停

.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}

.catalog:hover img{

transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog:hover .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}

<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>