在前端开发中,可以通过以下方式实现仅在悬停子菜单时才显示子菜单项:
示例代码如下:
HTML:
<ul class="menu">
<li class="parent">菜单1
<ul class="submenu">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li class="parent">菜单2
<ul class="submenu">
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
</ul>
</li>
</ul>
CSS:
.submenu {
display: none;
}
.parent:hover .submenu {
display: block;
}
示例代码如下:
HTML:
<ul class="menu">
<li class="parent" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">菜单1
<ul class="submenu">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li class="parent" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">菜单2
<ul class="submenu">
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
</ul>
</li>
</ul>
JavaScript:
function showSubMenu(parent) {
var submenu = parent.querySelector('.submenu');
submenu.style.display = 'block';
}
function hideSubMenu(parent) {
var submenu = parent.querySelector('.submenu');
submenu.style.display = 'none';
}
以上两种方法都可以实现仅在悬停子菜单时才显示子菜单项。具体选择哪种方法取决于项目需求和开发者的偏好。
领取专属 10元无门槛券
手把手带您无忧上云