Chrome主页图标hover放大被遮挡问题求助（附代码）

核心问题分析 #

图标hover放大后被其他元素遮挡，本质是层级优先级不足，默认情况下DOM中后出现的元素层级更高；同时你的HTML标签存在闭合顺序错误（<a>包裹<div>但闭合顺序颠倒），会导致布局异常。

解决方案 #

通过以下3个步骤修复：

• 修正HTML标签嵌套结构，确保语义正确
• 给图标容器添加相对定位，让z-index生效
• hover时提升图标层级，同时调整单元格内边距预留放大空间

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Start</title>
<style type="text/css">
body    {
    background-image: url(Greylight.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

table, th, td {
    border: 0px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 20px; /* 增大内边距，给放大的图标预留空间 */
}

img     {
    border-radius: 25%;
    width: 80px;
    height: 80px;
}

p   {
    border-style:solid;
    border-color:#808080 #800080;
} 

/* 给图标容器添加相对定位，为z-index提供上下文 */
.icon-container {
    position: relative;
}

.icon-container img {
    filter: grayscale(80%);
    transition: all 0.2s;
}

.icon-container:hover img {
    filter: grayscale(0%);
    transform: scale(2);
    z-index: 999; /* 提升层级，避免被其他图标遮挡 */
    position: relative; /* 让z-index生效 */
}
</style>
</head>
<body>
<table>
    <tr>
        <td>
            <div class="icon-container">
                <a href="http://.."><img src="image.jpg" alt="test"></a>
            </div>
        </td>
        <td>
            <div class="icon-container">
                <a href="http://.."><img src="image.jpg" alt="test"></a>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

关键修改说明 #

1. HTML结构修正：将<a>放入<div>内部，确保标签正确闭合，同时给每个图标容器添加统一类名.icon-container，便于统一样式控制。
2. 单元格内边距调整：把td的padding从6px改为20px，避免放大的图标超出单元格范围过多。
3. 层级控制：给.icon-container设置position: relative，hover时给img设置z-index: 999和position: relative，确保放大的图标处于最上层。
4. 过渡效果优化：将过渡效果绑定到图片上，保证灰度切换、缩放动画的流畅性。

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