CSS 网格悬停 "shuffeling"

Question

所以我正在处理带有网格部分的投资组合页面。问题是，当我悬停在一个项目上方时，它会随机触发该网格中的其他悬停动画

用于网格的代码如下

<div class="content">
  <div class="item">
  </div>
</div>

.content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2,1fr);
  grid-gap: 1em;
  margin: 0 10%;
  width: 80%;
}

* {
  font-family: 'Lato', sans-serif;
}

::selection {
  color: white;
  background-color: black;
}

::-moz-selection {
  color: white;
  background-color: black;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1em;
  margin: 0 10%;
  width: 80%;
}

.item {
  background: #f9f9f9;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
  transition: box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 99%;
}

.item:hover {
  box-shadow: 0px 16px 22px 2px rgba(51, 51, 51, 0.2);
  transform: translateY(-20px);
}

.item img {
  width: 100%;
}

.item .dimmer {
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(18, 18, 18, 0);
  transition: background .2s linear;
  z-index: 1;
}

.item:hover .dimmer {
  background: rgba(18, 18, 18, .5);
  width: 100%;
  height: 100%;
}

.item .description {
  position: absolute;
  width: 100%;
  top: 35%;
  z-index: 2;
}

.item:hover .description {
  position: absolute;
  width: 100%;
  top: 35%;
  z-index: 2;
}

.item .description h2 {
  margin-bottom: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0);
  transform: translateY(50px);
  transition-delay: 0s;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), color 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.item:hover .description h2 {
  color: white;
  transform: translateY(0%);
  transition-delay: 0.15s;
}

.item .description p {
  text-align: center;
  color: rgba(255, 255, 255, 0);
  transform: translateY(50px);
  transition-delay: 0s;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), color 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.item:hover .description p {
  color: white;
  transform: translateY(0%);
  transition-delay: 0.275s;
}

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">


<div class="head">
  <h1>Eric Wätke</h1>
  <a href="#">Über Mich</a>
</div>
<div class="content">
  <div class="item">
    <div class="dimmer"></div>
    <video autoplay loop width="100%">
       <source src="https://i.imgur.com/QPMfiUH.mp4" type="video/mp4" />
      </video>
    <div class="description">
      <h2>Technica Light & Sound</h2>
      <p>Event company</p>
    </div>
  </div>
  <div class="item">
    <div class="dimmer"></div>
    <video autoplay loop width="100%">
          <source src="https://i.imgur.com/QPMfiUH.mp4" type="video/mp4" />
        </video>
    <div class="description">
      <h2>Technica Light & Sound</h2>
      <p>Event company</p>
    </div>
  </div>
  <div class="item">
    <div class="dimmer"></div>
    <video autoplay loop width="100%">
          <source src="https://i.imgur.com/QPMfiUH.mp4" type="video/mp4" />
        </video>
    <div class="description">
      <h2>Technica Light & Sound</h2>
      <p>Event company</p>
    </div>
  </div>
</div>

https://codepen.io/cire901/project/full/XabEpV/

Answer 1

在您的 .item div 中，您的内容设置为 position: absolute，大概是因为您希望它们的大小和位置与 .item 相关。

当您将鼠标悬停在上面时，它看起来工作正常，但如果您从 .item:hover 中删除 transform: translateY(-20px);，您将看到 .description 和 .dimmer 内容得到相对于 <html> 元素定位。

这是因为您还没有在 .item 上定义 'positioning context'。每当您定位某物 'absolutely' 时，它都基于 'position context'。默认情况下，它将是 <html> 元素 - 因此，如果您将元素设置为 position: absolute; top: 50%;' it would be positioned 50% from the top of the` 元素，而不是它的直接 parent.

您可以通过设置 'position context' 来更改此设置。有多种方法可以做到这一点，但最常见的是在您希望根据上下文设置的项目上设置 position: relative。所以在你的情况下你会想把它添加到 .item.

当您将鼠标悬停在它上面时，它看起来像是在工作的原因是在元素上设置 transform 属性也会触发位置上下文，并且您有这个：

.item:hover {
  box-shadow: 0px 16px 22px 2px rgba(51, 51, 51, 0.2);
  transform: translateY(-20px);
}

这意味着当您将鼠标悬停在 .item 上时，其内容相对于 .item 定位，但当您移开时，它的位置相对于 html。这会导致它快速切换位置，并且你的光标有时会在悬停和不悬停之间移动很多次，因为它会在周围轻弹 - 因为每当你悬停在 .item 的 child 上时，你就会触发.item 悬停，即使它看起来不像是悬停在 .item 上。最简单的解决方案是将 position: relative 添加到 .item 选择器。

因为您正在变换 .item 的位置，所以如果您将鼠标悬停在 .item 的最底部，您仍然会感到颤抖。这是因为当项目向上移动屏幕时（因为 transform: translateY(-20px) 悬停）它移动悬停位置。当它向上移动时，你不再悬停在它上面，所以它开始向下移动。为防止这种情况，您可以在悬停时添加一个不可见的 pseudo-element，它占据它移动的 space：

.item{
  &:before{
  content:'';
  display: block;
  top:100%;
  position: absolute;
  width: 100%;
  height: 0;
}
.item:hover::before{
  height: 20px;
}

您也可以转换它以匹配移动速度，但这可能没有必要。

更进一步，因为您已经在使用 CSS 网格，您可以完全删除绝对定位。您可以将其添加到 .item:

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-content: stretch;
justify-content: stretch;

这会将其设置为只有一列和一行的网格，并拉伸内容以填充它。

然后添加此内容以告诉所有直系后代填充该一列和一行，而不是形成新的隐式行：

.item>*{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

最后，您可以将 .description 设置为 align-self: center;，从而将自身定位为垂直居中。

您可以在此处查看所有这些的示例：https://codepen.io/chrisboon27/pen/qopdNp

我已将 pseudo-element 涂成红色，这样您就可以看到示例了 - 您可能会想删除它。我已经注释掉了我删除的你的代码，并记下了我添加一行的位置。我也暂时将您的视频切换为 jpeg，因为我在加载它们时遇到问题。不过，这对 CSS 应该没有任何影响。

CSS 网格悬停 "shuffeling"

CSS Grid hover is "shuffeling"

css

hover

css-grid