如何在使用“>”定位 class 时添加悬停过渡

Question

我正在尝试添加过渡，但无法正常工作。我的悬停效果略有不同，因为它针对不同的 class 进行更改，它是：

.news-thumbnail:hover > .news-description-container{
padding: 1.5rem 2rem;
height: 21rem;  
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}

Edit: adding original class    

.news-description-container{
position:absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
background-color: white;
padding:2.5rem 2rem;
text-align: left;
height: 15.5rem;
}

这使得： https://i.stack.imgur.com/DyeOS.png

当你悬停它（新闻缩略图）时进入这个，只是白色区域（新闻描述容器）向上滑动： https://i.stack.imgur.com/Q6mxf.png

我怎样才能使这个转换工作？我只是想让它上下滑动，而不是 appear/disappear 没有过渡。

也许我做错了，不应该这样做？谷歌搜索后没有发现任何东西，所以它可能对其他人有用。

谢谢！

Answer 1

看这里...您可以使用相同样式的悬停过渡。

只需更改几个参数即可...

见代码[Here]1

如何在使用“>”定位 class 时添加悬停过渡

How to add hover transition while targeting class with ">"

css

transition

class

hover

target