主页 / coding / 问题 / 79160105
Accepted
InfiniteWolf
Asked: 2024-11-06 01:19:41 +0800 CST

弹性悬停元素未按预期运行

  • 772

我已经为我的初创企业设置了一个网页的雏形，但是我的一个 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;
}

再次感谢您提供的任何帮助:)

css

1 个回答

  1. Best Answer

    这是因为内容超出了卡片的范围，用户可以将鼠标悬停在卡片上以修复它，overflow: hidden;如下所示添加到您的卡片中：

    .card {
  overflow: hidden;
}

    这确保溢出的内容被隐藏并且用户无法将鼠标悬停在其上。

    • 1

相关问题