悬停效果

悬停效果-Bootstrap 5和Material Design 2.0

当用户将计算机光标放在元素上而没有 激活它。悬停效果使网站更具交互性。

但是,我们不建议您将悬停效果与功能元素(例如 悬停下拉菜单或仅在悬停后才可见的隐藏按钮),因为这种方法 不适用于移动设备。

MDB是移动优先的框架,因此我们非常重视简化每个组件 用于触摸屏。

这就是为什么我们的悬停效果具有温柔和装饰性的原因。


基本例子

这是悬停效果用法的最常见示例-更改为与 额外的涟漪效应。

此外,我们添加了阴影和圆角,还通过将波纹颜色更改为光 data-mdb-attribute


          <div
            class="bg-image hover-overlay ripple shadow-1-strong rounded"
            data-mdb-ripple-color="light"
          >
            <img src="https://mdbootstrap.com/img/new/fluid/city/113.webp" class="w-100" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
            </a>
          </div>
        

种类

在MDB中,有3种类型的悬停效果:叠加,缩放和阴影。

覆盖

覆盖是一种效果,可以用颜色和定义的不透明度级别覆盖整个图像。 与遮罩一样,您可以通过操纵RGBA代码来更改颜色和不透明度。

我们的叠加悬停效果依赖于蒙版。看看我们的 遮罩文档以了解更多信息。

.overlay 类添加到 .mask 元素以应用悬停效果。 然后操作RGBA代码以更改覆盖图的颜色。

rgba(18, 102, 241, 0.5)
rgba(178, 60, 253, 0.2)
rgba(0, 183, 74, 0.78)
rgba(249, 49, 84, 0.34)
rgba(251, 251, 251, 0.35)
rgba(57, 192, 237, 0.3)

您甚至可以将花式渐变设置为叠加层。


            <div class="bg-image hover-overlay">
              <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
              <div
                class="mask"
                style="
                  background: linear-gradient(
                    45deg,
                    rgba(29, 236, 197, 0.5),
                    rgba(91, 14, 214, 0.5) 100%
                  );
                "
              ></div>
            </div>
          

放大

要应用缩放悬停效果,您必须使用略有不同但更简单的语法。

您只需将 .hover-zoom 类添加到 .bg-image 元素。


            <div class="bg-image hover-zoom">
              <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
            </div>
          

阴影

阴影悬停效果甚至更简单。只需将 .hover-shadow 类添加到任何 元素以应用效果。


            <img
              src="https://mdbootstrap.com/img/new/standard/city/041.webp"
              class="w-100 hover-shadow"
              alt=""
            />
          

混合效果

您可以自由混合所有效果。但是,请注意不要过度使用它。MDB 坚持极简和微妙的原则。


          <div class="bg-image hover-overlay hover-zoom hover-shadow ripple">
            <img src="https://mdbootstrap.com/img/new/fluid/city/113.webp" class="w-100" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(57, 192, 237, 0.2)"></div>
            </a>
          </div>
        

遮罩上方

如果您想在图像上放置文字,并且需要适当的对比度,但仍然希望 具有悬停效果,您可以在现有的蒙版上应用覆盖。


          <div class="bg-image ripple" data-mdb-ripple-color="light">
            <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
                <div class="d-flex justify-content-center align-items-center h-100">
                  <p class="text-white mb-0">Can you see me?</p>
                </div>
              </div>
              <div class="hover-overlay">
                <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
              </div>
            </a>
          </div>