鼠标悬停列表链接时修改目录标题背景色的实现方法

要实现鼠标悬停在目录列表的任意链接上时，修改目录标题的背景色，有两种可行方案：

方案一：使用CSS :has() 伪类（现代浏览器支持） #

has()是CSS原生新增的选择器，可以让父元素根据子元素的状态触发样式，正好匹配你的需求。只需要在原CSS代码中添加以下规则：

/* 当容器内任意目录链接被hover时，修改标题背景色 */
.toc-container:has(.table-of-contents a:hover) .index-heading {
    background-color: #b8e65c; /* 可替换为你想要的颜色 */
    padding: 8px 0; /* 可选，让背景色覆盖更自然 */
    border-radius: 4px;
    transition: all 400ms; /* 添加过渡动画，效果更平滑 */
}

修改后的完整CSS代码 #

<style>
.toc-container {
    max-width: 600px;
    font-family: "Roboto", sans-serif;
    background: #deff9d;
    border-radius: 8px;
    box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}  
.toc-container h2.index-heading {
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 16px;
    padding-top: 16px;
}
/* 新增的hover触发规则 */
.toc-container:has(.table-of-contents a:hover) .index-heading {
    background-color: #b8e65c;
    padding: 8px 0;
    border-radius: 4px;
    transition: all 400ms;
}
.table-of-contents {
    list-style: none;
    padding: 0;
}
.table-of-contents li.author li.blog {
    background: #222;
    transition: 400ms;
    list-style: none;
}
.table-of-contents li.author{
    background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
    background: #2e2e2e;
} 
.table-of-contents li.author li:hover.blog {
    background: #000;
} 
.table-of-contents li a {
    text-decoration: none;
    color: #fff;
    margin-left: 24px;
    padding: 16px 0;
    display: block;
}
</style>

注意：has()伪类目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容旧版浏览器，建议使用下面的JavaScript方案。

方案二：使用JavaScript实现（全浏览器兼容） #

通过给所有目录链接绑定鼠标移入/移出事件，手动修改标题的样式：

在</body>标签前添加以下代码：

// 获取所有目录链接和标题元素
const tocLinks = document.querySelectorAll('.table-of-contents a');
const heading = document.querySelector('.index-heading');

// 鼠标移入时修改标题样式
tocLinks.forEach(link => {
    link.addEventListener('mouseover', () => {
        heading.style.backgroundColor = '#b8e65c';
        heading.style.padding = '8px 0';
        heading.style.borderRadius = '4px';
        heading.style.transition = 'all 400ms';
    });
    // 鼠标移出时恢复原样式
    link.addEventListener('mouseout', () => {
        heading.style.backgroundColor = '';
        heading.style.padding = '';
        heading.style.borderRadius = '';
    });
});

修改后的完整HTML代码 #

<html lang="vi">
    <head>
        <style>
.toc-container {
    max-width: 600px;
    font-family: "Roboto", sans-serif;
    background: #deff9d;
    border-radius: 8px;
    box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}  
.toc-container h2.index-heading {
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 16px;
    padding-top: 16px;
}
.table-of-contents {
    list-style: none;
    padding: 0;
}
.table-of-contents li.author li.blog {
    background: #222;
    transition: 400ms;
    list-style: none;
}
.table-of-contents li.author{
    background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
    background: #2e2e2e;
} 
.table-of-contents li.author li:hover.blog {
    background: #000;
} 
.table-of-contents li a {
    text-decoration: none;
    color: #fff;
    margin-left: 24px;
    padding: 16px 0;
    display: block;
}
        </style>
    </head>
    <body>
        <div class="toc-container">
            <h2 class="index-heading">heading</h2>
            <ul class="table-of-contents">
                <li class="author">
                    <a href="#">Author's name</a>
                    <ul>
                        <li class="blog">
                            <a href="#">Nháp 1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <script>
const tocLinks = document.querySelectorAll('.table-of-contents a');
const heading = document.querySelector('.index-heading');

tocLinks.forEach(link => {
    link.addEventListener('mouseover', () => {
        heading.style.backgroundColor = '#b8e65c';
        heading.style.padding = '8px 0';
        heading.style.borderRadius = '4px';
        heading.style.transition = 'all 400ms';
    });
    link.addEventListener('mouseout', () => {
        heading.style.backgroundColor = '';
        heading.style.padding = '';
        heading.style.borderRadius = '';
    });
});
        </script>
    </body>
</html>

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