html—我想创建一个项目滑块，当我将鼠标悬停在项目上方时，它会在项目上方显示一个模式，并且不会影响页面上的其他内容

zynd9foi 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(322)

-请考虑滑块作为工作滑块，下面的结构只是样品。我不知道在哪里添加，所以我没有提到它-模态将包含与悬停项相关的信息。
每个项目都有自己的模式-我想创建类似netflix的悬停效果-我已经看过并尝试了视频，它当然有效，但它会影响页面上的其他内容，喜欢它拉下面部分的内容。以下是一些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;
}

jquery Html css slider Hover

来源：https://stackoverflow.com/questions/68475027/i-want-to-to-create-a-item-slider-where-when-i-hover-over-the-item-a-modal-exac

1条答案

按热度按时间

lskq00tm1#

你要找的（如果我理解你的问题）是 transform 属性。你可以在这里了解更多。我还使用了 transition 属性使效果平滑地设置动画（您可以在此处阅读）。
我在下面举了一个例子。

.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; 在项目组的容器上。

赞(0）回复(0）举报 2021-09-23

我来回答

html—我想创建一个项目滑块，当我将鼠标悬停在项目上方时，它会在项目上方显示一个模式，并且不会影响页面上的其他内容

1条答案

相关问题

热门标签

最新问答