flex 悬停元素未按预期运行

Question

我已经为我的初创企业设置了一个网页的开头，但是我的一个 Flex 对象的 CSS 没有按预期进行。

我在卡片上附加了一个 :hover 来更改内部文本的不透明度和卡片本身的大小，这样卡片看起来就像随着文本一起增长。然而，这会带来一个问题，如果您将鼠标悬停在 Flex 元素当前隐藏的部分上，它就会完成 :hover CSS。

您可以在这里查看网站：NetRepair

如有任何帮助，我们将不胜感激，代码位于该页面的 GitHub 存储库中。我知道有一些不好的做法，但我只是在学习。 :)

对于那些不想去 Github 获取 CSS 的人：

.container .card {
    position: relative;
    width: 250px;
    height: 215px;
    background-color: #303030;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 40px;
    font-family: helvetica, sans-serif;
    border-radius: 7px;
    animation: gradient 5s ease infinite;
    transition: 1.1s ease-in-out;
}
.container .card:hover .content-h {
    opacity: 1;
    visibility: visible;
    font-family: helvetica, sans-serif;
    transition: 1.2s ease-in-out;
}
.container .card:hover {
    position: relative;
    height: 525px;
    font-family: helvetica, sans-serif;
    margin-bottom: -310px;
    padding: 15px;
        padding-top: 60px;
}

再一次，任何帮助将不胜感激:)

Answer 1

这是因为内容从卡片溢出，用户可以将鼠标悬停在内容上以修复它，并将

overflow: hidden;

添加到您的卡片。