Css 如何使flexbox在悬停时展开，从而在移动设备上具有滚动选项？我'；I’我在找你

我有一个横幅，有5个图片并排在一起，其中每一个都展开，以便在悬停时显示更多的文本。但是在手机上阅读变得非常困难，所以我想知道是否有一种方法可以像Foo Fighters网站（）那样添加滚动效果

我试图避免使用滚动条，而是使用左箭头和右箭头

该网站建立在Bootstrap4上

#集装箱横幅{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：75vh；
宽度：100vw；
}
#容器标题：悬停>.section{
-webkit过滤器：亮度（22%）；
滤光片：亮度（22%）；
}
#容器标题：悬停>。部分：悬停{
-webkit过滤器：亮度（100%）；
滤光片：亮度（100%）；
}
#货柜横幅组{
柔性生长：1；
位置：相对位置；
身高：100%；
过渡：全部为0.4s；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
文本对齐：居中；
弹性：1；
}
#集装箱横幅。章节。续标题{
位置：相对位置；
保证金：自动；
宽度：100%；
高度：自动；
文本对齐：居中；
边际上限：37vh；
}
#集装箱横幅。章节。续标题h1{
文本转换：大写；
颜色：白色；
字体系列：“Economica”，无衬线；
文本阴影：1px2p5pRGBA（0,0,0,0.5）；
字体大小：3.5vw；
保证金：0；
转换：字体大小0.3s；
垂直对齐：中间对齐；
}
#集装箱横幅。章节。续标题h3{
文本转换：大写；
字体系列：“Economica”，无衬线；
字体大小：1.3vw；
过渡：均为0.3秒；
颜色：白色；
字母间距：3px；
文本阴影：1px2p5pRGBA（0,0,0,0.5）；
}
#集装箱横幅。章节。续说明{
位置：相对位置；
显示：块；
文本对齐：居中；
宽度：12vw；
高度：自动；
保证金：自动；
不透明度：0；
转换：不透明度0.8s，填充顶部0.9s，-webkit转换0.7s；
过渡：不透明度0.8s，变换0.7s，填充顶部0.9s；
过渡：不透明度0.8s，变换0.7s，填充顶部0.9s，-webkit变换0.7s；
填充顶部：6vh；
-webkit转换：规模（1）；
变换：比例（1）；
}
#集装箱横幅。章节。续说明{
保证金：0；
字体系列：“Economica”，无衬线；
颜色：白色；
字体大小：16px；
}
#集装箱横幅。部分：悬停{
弹性增长：1.8；
过渡：flex 0.2s；
}
#容器横幅。部分：悬停>.cont\u标题h1{
字体大小：5.3vw；
过渡：字体大小0.4s；
}
#集装箱横幅。部分：悬停>.cont\u标题h3{
字体大小：1.6vw；
过渡：全部为0.4s；
}
#容器标题。部分：悬停>.cont\u desc{
不透明度：1；
填充顶部：2vh；
-webkit转换：比例（1.5）；
转换：比例（1.5）；
转换：不透明度0.7s，填充顶部0.5s，-webkit转换0.1s；
过渡：不透明度0.7s，填充顶部0.5s，变换0.1s；
转换：不透明度0.7s，填充顶部0.5s，转换0.1s，-webkit转换0.1s；
转换延迟：0s，0.1s，0s；
}
#集装箱横幅。部分：第n个子（1）{
背景：url（“../img/members/second round.jpg”）中心；
}
#集装箱横幅。部分：第n个子（2）{
背景：url（“../img/members/3rd round.jpg”）中心；
}
#集装箱横幅。剖面：第n个子（3）{
背景：url（“../img/HRBAlbumCover.svg”）中心；
对象匹配：覆盖；
-webkit背景大小：包含；
背景尺寸：包含；
背景色：黑色；
}
#集装箱横幅。章节：第n个子（4）{
背景：url（“../img/members/3.jpg”）中心；
}
#集装箱横幅。剖面：第n个子（5）{
背景：url（“../img/members/4.jpg”）中心；
对象匹配：覆盖；
}

仅限成员

注册后免费歌曲

报名
登录

您使用过名为

owl.carousel的jquery库吗？这是一个很棒的库，可以让您轻松创建支持触摸和拖动的转盘滑块，这在移动设备中至关重要

关于小型设备

大于600像素

大于1000px

您还可以完全自定义每个断点要显示的项目数：

$(function(){
    $("#banner").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
        0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });
});

导航箭头本可以得到更多的爱，但你完全可以随心所欲地设计它们

Fiddle link:
Hi@David，我以前用过它，但这次我尽量避免使用它，因为我总是会在网站上添加很多css和js，然后事情开始变得混乱。但是，我已经忘记了移动设备上的滑动动作，所以使用猫头鹰旋转木马可能是最好的选择，因为idk没有其他解决方法。感谢您抽出时间帮助我：）