我想创建一个项目滑块，当我将鼠标悬停在该项目上时，一个模态正好在它上面，它不应该影响页面上的其他内容

问题描述

-请将滑块视为工作滑块，下面的结构只是示例。我不知道在哪里添加所以我没有提到它。 -modal 将包含与悬停项目相关的信息。

• 每个项目都有自己的模态。 - 我想创建 NETFLIX 之类的悬停效果。 - 我看过并尝试过 video 它确实有效，但它会影响页面上的其他内容，喜欢它提取下面部分的内容。 这是一些 HTML 代码：

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

这里是CSS

.slider{
  display:flex;
  justify-content:center;
  margin-bottom:15px;
}
.item{
  height:250px;
  width:250px;
  display:inline-block;
  background-color:#232323;
  margin-right:15px;
}
.item:last-child{
  margin-right:0;
}

解决方法

您正在寻找（如果我理解您的问题）是 CSS 中的 transform 属性。您可以阅读有关它的更多信息 here。我还使用了 transition 属性使效果流畅地动画（您可以阅读有关 here 的内容）。

我在下面包含了一个示例。

.slider{
  display:flex;
  justify-content:center;
  margin-bottom:15px;
}
.item{
  height:250px;
  width:250px;
  display:inline-block;
  background-color:#232323;
  margin-right:15px;
  
  /* make the transform effect the element smoothly */
  transition: transform 0.15s;
}
.item:last-child{
  margin-right:0;
}

/* act on element hover */
.item:hover {
  /* scale up the hovered item 1.15x */
  transform: scale(1.15);
}

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

注意：如果您不想让滚动条出现在元素周围，您可以在项目组的容器上使用 overflow: hidden;。