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

Posted 2023-03-06

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

【英文标题】：I want to to create a item slider where, when I hover over the item a modal exactly over it and it should not affect other content on the page

【发布时间】：2021-09-29 03:44:06

【问题描述】：

-请将滑块视为工作滑块，下面的结构只是示例。我不确定在哪里添加，所以我没有提到它。 -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;

【参考方案1】：

您正在寻找的（如果我理解您的问题）是 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;。