CSS 网格悬停是 "shuffeling"

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

用于网格的代码如下

<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/

最佳答案

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

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

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

您可以通过设置“位置上下文”来更改此设置。有很多方法可以做到这一点，但最常见的是设置 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 的子项上时。你正在触发 .item悬停，即使它看起来不像你悬停在 .item 上本身。最简单的解决方案是添加 position: relative给你的.item选择器。

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

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

您也可以转换它以匹配移动速度，但这可能不是必需的。

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

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

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

然后添加此代码以告诉所有直接后代填充该列和行，而不是形成新的隐式行:

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

最后你会设置你的 .description至 align-self: center;从而将自身定位为垂直居中。

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

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

关于CSS 网格悬停是 "shuffeling"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49478056/

CSS 网格悬停是 "shuffeling"

上一篇：html - 我该怎么做才能获得相同的列高？

下一篇：javascript - 如何使用 javascript 在我的按钮点击上添加此类？