背景
在 Web 开发中，我们常常需要实现文本或图片悬浮的效果。即当鼠标悬停在文本或图片上时，出现一个浮层并显示更多内容。这种效果给用户带来更好的体验和便利，因此在网页设计中经常应用。
传统的实现方法包括使用 CSS 的 position 属性和 JavaScript 的事件监听等。这种方式虽然可行，但实现起来比较麻烦，尤其是在布局较为复杂的情况下。而在现代 Web 开发中，我们有两种更为便捷的方式来实现这种效果：Flexbox 布局和 Grid 布局。
实现方法
Flexbox 布局
Flexbox 布局是一种基于弹性盒子模型的布局方式，适用于响应式设计和复杂布局的设计。与传统布局方式不同，Flexbox 不依赖于任何定位方式。因此，实现文本或图片悬浮的效果也就变得十分简单。
首先，我们需要创建一个包含文本或图片的容器元素，并将其设为 Flexbox 布局。
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}然后，我们可以创建一个浮层容器元素，并将其隐藏。
.popup {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}最后，我们可以为容器元素设置 :hover 伪类，并将浮层容器元素显示出来。
.container:hover .popup {
display: block;
}这样，当用户鼠标悬停在文本或图片上时，浮层容器就会显示出来，实现了文本或图片悬浮的效果。
Grid 布局
Grid 布局是一种基于网格的布局方式，适用于复杂布局和定制化设计。与 Flexbox 相比，Grid 布局更加灵活，可以实现更为复杂的布局效果，包括文本或图片悬浮的效果。
首先，我们需要创建一个网格容器元素并将其设为 Grid 布局。
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 16px;
grid-column-gap: 16px;
}然后，我们可以创建一个浮层容器元素，并将其隐藏。
.popup {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
grid-column: 1 / span 2;
}最后，我们可以为容器元素中的每个网格元素设置 :hover 伪类，并将浮层容器元素显示出来。
.container > *:hover .popup {
display: block;
}这样，当用户鼠标悬停在文本或图片上时，对应的浮层容器就会显示出来，实现了文本或图片悬浮的效果。
示例代码
以下是完整的示例代码，其中包括 Flexbox 和 Grid 两种布局方式的具体实现。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- - --------------
-------
---------- -
------- - -----
-------- -----
---------- ------
-------- -----
---------- -----
---------------- -----------
------------ -----------
-
----- -
--------- ---------
------ -------- - -----
------------- -----
-------------- -----
----------------- --------
-
----------- ------ -
-------- ------
-
------ -
-------- -----
--------- ---------
---- --
----- --
-------- --
------ -----
------- -----
----------------- --------
----------- -------
-
--------------- -
------- - -----
-------- -----
---------- ------
-------- -----
------------------- --------- -----
---------------------- --------- -----
------------- -----
---------------- -----
-
---------- -
--------- ---------
----------------- --------
-
---------------- ------ -
-------- ------
-
----------- -
-------- -----
--------- ---------
---- --
----- --
-------- --
------ -----
------- -----
----------------- --------
----------- -------
------------ - - ---- --
--------- - - ---- --
-
--------
-------
------
----------- -------
---- ------------------
---- -------------
---- -------------------------------------- ---------
---- --------------
----------------
------
------
---- -------------
--------------
---- --------------
----------------
------
------
---- -------------
---- -------------------------------------- ---------
---- --------------
----------------
------
------
---- -------------
--------------
---- --------------
----------------
------
------
------
-------- -------
---- -----------------------
---- ------------------
---- -------------------------------------- ---------
---- -------------------
----------------
------
------
---- ------------------
--------------
---- -------------------
----------------
------
------
---- ------------------
---- -------------------------------------- ---------
---- -------------------
----------------
------
------
---- ------------------
--------------
---- -------------------
----------------
------
------
------
-------
-------总结
本文介绍了使用 Flexbox 和 Grid 布局方法实现文本或图片悬浮效果的方法。相对于传统的实现方式，这种方法更加方便、快捷和灵活，适用于各种不同的布局需求。希望本文能为前端工程师们提供一些有价值的指导和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fd88048841e9894f5bc3a