在前端开发中，我们经常需要实现当鼠标悬停在一个元素上时，显示与该元素关联的子元素。这在菜单、下拉列表等场景中非常常见。虽然使用纯 CSS 也可以实现这一效果，但是为了更灵活地控制子元素的显示和隐藏，我们通常需要借助 JavaScript 来实现。
实现思路
- 获取父元素和子元素的 DOM 对象
- 当鼠标进入父元素时，将子元素的
display属性设置为block - 当鼠标离开父元素时，将子元素的
display属性设置为none
示例代码
HTML：
---- ---------------
---- --------------
---
------
---
------CSS：
------- - --------- --------- - ------ - -------- ----- --------- --------- ---- ----- ----- -- -
JavaScript：
----- ------ - ---------------------------------- ----- ----- - --------------------------------- ------------------------------------- -- -- - ------------------- - -------- --- ------------------------------------- -- -- - ------------------- - ------- ---
在上面的示例代码中，我们首先使用 CSS 将子元素定位到父元素下方，并将其默认状态设为不可见。然后通过 JavaScript 获取父元素和子元素的 DOM 对象，并添加监听事件。当鼠标进入父元素时，将子元素的 display 属性设为 block，使其可见；当鼠标离开父元素时，将子元素的 display 属性设为 none，隐藏子元素。
拓展思路
上述实现思路虽然简单易懂，但是在实际开发中可能会有一些扩展需求。例如，我们想要实现以下效果：
- 当鼠标进入父元素时，子元素从左侧滑入并淡入显示
- 当鼠标离开父元素时，子元素从右侧滑出并淡出隐藏
这个需求可以通过 CSS3 动画来实现。具体来讲，我们需要定义两个 CSS3 动画，分别表示子元素的进入和退出过程。然后，在 JavaScript 中动态添加和移除类名，触发相应的动画效果。
CSS：
------ -
-------- -----
--------- ---------
---- -----
----- --
------------------- -----
-------------------- ---------
-
-- ---- --
------------ -
--------------- -----------------------
-
-- ---- --
----------- -
--------------- -----------------------
-
---------- ---------------------- -
---- -
---------- ------------------
-------- --
-
-- -
---------- --------------
-------- --
-
-
---------- ---------------------- -
---- -
---------- --------------
-------- --
-
-- -
---------- -----------------
-------- --
-
-JavaScript：
----- ------ - ----------------------------------
----- ----- - ---------------------------------
------------------------------------- -- -- -
-----------------------------------
------------------- - --------
---
------------------------------------- -- -- -
----------------------------------
------------- -- -
------------------------------------- --------------
------------------- - -------
-- -----
---在上面的代码中，我们首先定义了两个 CSS3 动画，分别表示子元素进入和退出时的动画效果。然后，在 JavaScript 中，当
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30361