hover鼠标经过显示下拉列表

Hover是一种鼠标交互效果，当用户将鼠标悬停在元素上时，它会触发某个事件。

如果要在鼠标经过元素时显示下拉列表，可以使用CSS的:hover选择器和JavaScript的 mouseover 事件。

例如，HTML代码中有一个名为“dropdown”的元素：

接着，可以使用以下CSS代码来隐藏下拉列表，并在鼠标经过元素时显示它：

.dropdown-menu { display: none;

.dropdown:hover .dropdown-menu { display: block;

最后，如果需要通过JavaScript来动态控制下拉列表的显示和隐藏，可以使用以下代码：

const dropdown = document.querySelector('.dropdown'); const dropdownMenu = document.querySelector('.dropdown-menu');

dropdown.addEventListener('mouseover', () => { dropdownMenu.style.display = 'block';

dropdown.addEventListener('mouseout', () => { dropdownMenu.style.display = 'none'; });