鹿它野 2023-04-05 20:37 采纳率: 80%
浏览 81
已结题

手写tabs hover问题

img


手写的tabs，鼠标移入父级tabs,子级导航出现，鼠标移出tabs元素，子级导航就消失了，根本无法操作子级怎么办

  • 写回答

2条回答 默认 最新

  • 人工智能_SYBH 2023-04-05 20:51
    关注

    这个问题的原因是子级导航在鼠标移出父级tabs时消失，导致用户无法操作子级导航。你可以通过在CSS和JavaScript中做一些调整来解决这个问题。
    HTML结构：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Hover Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tabs">
        <div class="tab-item">Tab 1</div>
        <div class="tab-item">Tab 2
            <ul class="sub-menu">
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
            </ul>
        </div>
        <div class="tab-item">Tab 3</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

    CSS样式：

    .tabs {
    display: flex;
    position: relative;
}

.tab-item {
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    list (style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ccc;
}

.sub-menu li {
    padding: 10px 20px;
    cursor: pointer;
}

    JavaScript代码:

    document.addEventListener('DOMContentLoaded', function () {
    const tabItems = document.querySelectorAll('.tab-item');

    tabItems.forEach(tabItem => {
        tabItem.addEventListener('mouseenter', () => {
            const subMenu = tabItem.querySelector('.sub-menu');
            if (subMenu) {
                subMenu.style.display = 'block';
            }
        });

        tabItem.addEventListener('mouseleave', () => {
            const subMenu = tabItem.querySelector('.sub-menu');
            if (subMenu) {
                subMenu.style.display = 'none';
            }
        });
    });
});

    这个实例中，当鼠标移入tab-item时，子级导航（sub-menu）会显示，当鼠标移出tab-item时，子级导航会消失。这样一来，用户就可以正常操作子级导航了。

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月6日
  • 修改了问题 4月5日
  • 创建了问题 4月5日

悬赏问题

  • ¥15 如何在maya程序中利用python编写领子和褶裥的模型的方法
  • ¥15 Linux权限管理相关操作（求解答）
  • ¥15 Bug traq 数据包 大概什么价
  • ¥15 在anaconda上pytorch和paddle paddle下载报错
  • ¥25 自动填写QQ腾讯文档收集表
  • ¥15 DbVisualizer Pro 12.0.7 sql commander光标错位 显示位置与实际不符
  • ¥15 求一份STM32F10X的I2S外设库
  • ¥15 android 打包报错
  • ¥15 关于stm32的问题
  • ¥15 ncode振动疲劳分析中，noisefloor如何影响PSD函数？