悬停效果

悬停效果-Bootstrap 5和Material Design 2.0

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

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

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

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

基本例子

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

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

HTML


          <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)

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

HTML


            <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 元素。

HTML


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

阴影

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

HTML


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

混合效果

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

HTML


          <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>

遮罩上方

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

Can you see me?

HTML


          <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>