实现HTML&CSS中.logo区域整体悬停时图标与文字同步变色效果

只需修改CSS中图标变色的选择器，把针对图标本身的hover触发改为容器hover时触发图标样式：

修改关键CSS代码 #

将原来的：

.logo i:hover { color: green; }

替换为：

.logo:hover i { color: green; }

完整代码示例 #

<html>
<head>
    <title>check</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <style>
        .logo { 
            width: 200px; 
            background-color: red; 
        }
        .logo:hover { 
            color: red; 
            background: black; 
        }
        .logo:hover i { 
            color: green; 
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="logo">
            <i class="bi bi-hurricane icon-4x"></i>
            <span class="admin">ADMIN</span>
        </div>
    </div>
</body>
</html>

原理说明 #

原来的.logo i:hover规则仅在鼠标直接悬停在<i>图标元素上时生效；改成.logo:hover i后，只要鼠标悬停在.logo容器的任意区域，容器内的<i>元素就会自动应用颜色样式，实现图标和容器同步响应hover状态的效果。

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