我可以使用 :not 伪类根据光标是否覆盖 HTML 元素来交换 HTML 元素的动画吗？

Question

在深入使用 Tailwind 等前端框架之前，我正在尝试学习 CSS 基础知识。我为自己制作了一个制作网页的小项目，我的第一个任务是制作一个侧边栏，通过将鼠标悬停在页面的一侧即可使其可见。我的 HTML 输出的正文如下所示：

<div id="root">
   <div class="layout">
      <div class="bio">
         <img>
         <p flex="4">Hello, World!</p>
      </div>
      <div class="container">
         <div class="content"></div>
      </div>
   </div>
</div>

我知道这可能有点令人高兴，但我正在这里学习。我的问题是我的 css 文件正确排列了元素，以便屏幕的左侧是一些文本和图像所在的“bio”，屏幕的右侧是代表侧面板的“容器”。当我悬停容器时，它会正确运行菜单宽度从其宽度的 0% 增长到 100% 的动画。我正在努力使侧边栏最初以 0% 的宽度显示，并且正在努力触发动画渲染以使侧边栏从其宽度的 100% 折叠到 0%。这是我的 css 文件：

.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.bio {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.container {
    flex: 1;
    margin: 0;
    padding: 0;
    min-width: 200px;
    max-width: 500px;
    height: 100%;
    display: inline-block;
}

.content {
    padding-left: 5px;
    min-width: 0px;
    max-width: 500px;
    height: 100%;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: black;
    background: grey;
    transform-origin: bottom right
}

.container:hover .content {
    animation: show-menu 0.5s ease-in normal; 
}

.bio:hover ~ .container.content {
    animation: show-menu 0.5s ease-out reverse; 
}

@keyframes show-menu {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

目前，我正在尝试通过附加“bio”类悬停时的CSS规则来捕获侧边栏容器的not悬停，该规则基本上覆盖了屏幕上未被“容器”覆盖的每个部分班级。事实证明这很困难，并且使用像“~”这样的选择器来引用同级元素是行不通的。我最初尝试使用“：not”伪类来应用“容器”未以更直观的方式悬停时的规则，但这对我不起作用（我尝试使用

.container:not(:hover) .content

作为规则标题）。

我觉得这对于任何有经验的网络开发人员来说都是一项简单的任务，但我很难克服这个障碍或专门找到有关它的帖子。非常感谢任何建议！

** 最后一点，如果相关的话，我正在运行 React 作为此应用程序的 UI 服务器。

Answer 1

看起来您只需对 CSS 进行一些小调整即可开展业务。我们可以通过完全避免动画来简化一点，以获得

transition

属性中更简单的解决方案。

在内部 div 中添加几行新行

content

规则：

.content {
  padding-left: 5px;
  // we want width to be 0 before hovering anything
  width: 0;
  height: 100%;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: black;
  background: grey;
  // essentially "watching" width changes and applying a transition to it
  transition: width .5s ease-in;
}

但是此更改具有

content

在其父项中从左向右扩展，

container

...这里我们设置

container

的样式，以在渲染时正确对齐其子项：

.container {
  width: 500px;
  height: 100%;
  display: flex;
  justify-content: right;
}

这为我们提供了完全取消动画的完美设置。每当

container

悬停时，我们所要做的就是手动设置

content

的宽度。

.container:hover .content {
  width: 100%;
}

CSS 示例中

.container:hover .content

规则下方的所有内容都可以通过这种安排删除。当您不再悬停

container

时，样式将消失，并且

content

的宽度将自然重置为

0

。