悬停效果
悬停效果-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>