Bootstrap是一个流行的CSS框架,前端开发人员广泛使用它来为Web应用程序创建交互式UI。 Bootstrap因其简单易用而被广泛使用。 BootStrap允许多个实用程序使图像具有交互性。这些实用程序之一可以将鼠标悬停在上面时更改图像的颜色。悬停基本上是将光标移到图像上。下面的代码段演示了如何使用引导程序向图像添加黑色悬停。
第一种方法:
在此方法中,内容叠加层类指定了鼠标悬停在图像上时所需的图像属性。当用户将鼠标悬停在content-overlay类上时,background属性指定图像的不透明度。 content-details类指定一组属性,这些属性用于当鼠标悬停在图像上方时显示在图像顶部的内容。
例子:
Workstation
Hover out to view image
输出:
替代方法:
第二种方法也处理悬停效果,但是这里的悬停不透明度设置为1,这意味着基础图像被完全隐藏。 overlay类包含悬停时图像的一组规范。背景颜色设置为黑色。过渡时间和性质也已设定。
例子:
Adding black color to image
using the overlay class
Hover over the image to see the effect.
输出: