如何解决我想创建一个项目滑块,当我将鼠标悬停在该项目上时,一个模态正好在它上面,它不应该影响页面上的其他内容
-请将滑块视为工作滑块,下面的结构只是示例。我不知道在哪里添加所以我没有提到它。 -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;
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。