如何实现鼠标悬停不同li元素时切换父div的背景图片

因为CSS没有父选择器，没法通过子元素的hover状态直接为父元素设置不同的背景样式，所以我们用JavaScript来实现这个需求，步骤如下：

1. 调整基础CSS #

先移除原有的#mainpage:hover样式，保留pointer-events的设置，确保只有列表区域能响应鼠标事件，同时修正原代码里的笔误：

#mainpage{  
    pointer-events: none;
    /* 可设置默认背景，按需调整 */
    background: url("default-bg.jpg") no-repeat top / 100%;
    height: 500px; /* 原代码的500x是笔误，改为500px */
}

#listman {
    pointer-events: auto;
}

2. 规范HTML（可选） #

li标签本身不支持href属性，把该属性移到内部的a标签上，更符合HTML规范：

<div id="mainpage">
    <div id="listman">
        <ul class="bigger">
            <li id="listman1"><a href="#"> 1 </a></li>
            <li id="listman2"><a href="#"> 2 </a></li>
            <li id="listman3"><a href="#"> 3 </a></li>
            <li id="listman4"><a href="#"> 4 </a></li>
            <li id="listman5"><a href="#"> 5 </a></li>
            <li id="listman6"><a href="#"> 6 </a></li>
            <li id="listman7"><a href="#"> 7 </a></li>
            <li id="listman8"><a href="#"> 8 </a></li>
        </ul>
    </div>
</div>

3. 添加JavaScript逻辑 #

通过监听每个li的鼠标进入/离开事件，动态修改父容器的背景：

// 获取父容器和所有列表项
const mainPage = document.getElementById('mainpage');
const listItems = document.querySelectorAll('#listman li');

// 定义每个列表项对应的背景图片路径
const bgMap = {
    listman1: 'bg1.jpg',
    listman2: 'bg2.jpg', // 这里替换为你需要的不同背景图
    listman3: 'bg3.jpg',
    listman4: 'bg4.jpg',
    listman5: 'bg5.jpg',
    listman6: 'bg6.jpg',
    listman7: 'bg7.jpg',
    listman8: 'bg8.jpg'
};

// 为每个列表项绑定事件
listItems.forEach(item => {
    // 鼠标悬停时设置对应背景
    item.addEventListener('mouseenter', () => {
        const bgUrl = bgMap[item.id];
        if (bgUrl) {
            mainPage.style.background = `url("${bgUrl}") no-repeat top / 100%`;
        }
    });

    // 鼠标离开时恢复默认背景
    item.addEventListener('mouseleave', () => {
        mainPage.style.background = 'url("default-bg.jpg") no-repeat top / 100%';
    });
});

补充说明 #

• 你可以根据需求修改bgMap里的图片路径，给每个li指定独有的背景。
• 如果不需要默认背景，鼠标离开时可以清空背景或设置成其他样式。

内容的提问来源于stack exchange，提问作者Farwhy