我有一些文本(#cof-description)，我想使用CSS transition属性在悬停时显示。

CSS如下所示:

.grid {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}

.grid-item {
    width: 30%;
    margin: 0 1% 1em 1% !important;
    border: 1px solid #f7f7f7;
}
.grid-item #cof-description .elementor-widget-wrap {
    opacity: 0;
    position: absolute;
    bottom: 20%;
}
.grid-item:hover #cof-description .elementor-widget-wrap {
    position: absolute;
    bottom: 30%;
    left: 4.5%;
    z-index: 1000;
    width: 90%;
    opacity: .85;
    -webkit-transition: opacity 1s all;
    -moz-transition: opacity 1s all;
    -o-transition: opacity 1s all;
    transition: opacity 1s all;
}

无论我把转换属性放在哪里，它都不起作用。 您可以通过将鼠标悬停在https://editart2020.crooked.media/circle-of-friends/（可能无法使用Chrome访问）上的其中一个项目上看到这一点

任何帮助和事先的感谢。