掌握CSS悬停效果：为网站Logo添加平滑过渡动画

<div class="imagen">
    <a href="#home">
        <!-- 默认Logo -->
        <img class="logo-default" src="light.ico" alt="Default Logo">
        <!-- 悬停Logo -->
        <img class="logo-hover" src="intermedium.ico" alt="Hover Logo">
    </a>
</div>

/* HEADER 样式保持不变 */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1% 2% 1% 2%;
    /* 确保背景色在这里定义，而不是 * 中 */
    background-color: var(--dark); 
}

/* 左侧信息区域 */
header .left-info {
    display: flex;
    align-items: center;
}

/* Logo容器：设置为相对定位，作为绝对定位元素的参照 */
header .left-info .imagen {
    position: relative;
    /* 确保Logo容器有明确的尺寸，以包含两张图片 */
    width: 64px; /* 根据实际Logo尺寸调整 */
    height: 64px; /* 根据实际Logo尺寸调整 */
    display: flex; /* 确保内部图片可以正常显示 */
    align-items: center;
    justify-content: center;
}

/* 默认Logo样式 */
header .left-info .imagen .logo-default {
    /* 确保默认Logo可见 */
    opacity: 1;
    /* 确保它在悬停Logo之下 */
    z-index: 1; 
    /* 尺寸调整，如果需要 */
    max-width: 100%;
    height: auto;
    /* 默认Logo不需要过渡，因为它不会直接改变 */
}

/* 悬停Logo样式 */
header .left-info .imagen .logo-hover {
    position: absolute; /* 绝对定位，覆盖在默认Logo上方 */
    top: 0;
    left: 0;
    opacity: 0; /* 初始状态隐藏 */
    z-index: 2; /* 确保悬停Logo在默认Logo之上 */
    /* 应用过渡效果，只针对opacity属性 */
    transition: opacity .5s ease-in-out; 
    /* 尺寸调整，如果需要，应与默认Logo尺寸匹配 */
    max-width: 100%;
    height: auto;
}

/* 鼠标悬停在.imagen容器上时，显示悬停Logo */
header .left-info .imagen:hover .logo-hover {
    opacity: 1; /* 鼠标悬停时显示 */
}

/* 鼠标悬停在.imagen容器上时，隐藏默认Logo（可选，但推荐） */
header .left-info .imagen:hover .logo-default {
    opacity: 0;
    transition: opacity .5s ease-in-out; /* 默认Logo也添加过渡，使其平滑隐藏 */
}

/* 其他CSS保持不变 */
/* ... 省略其他CSS样式 ... */

/* CSS RESET 调整：避免 * 选择器设置背景色 */
/* 原始CSS中 * { background-color: var(--dark); } 会导致所有元素都使用深色背景，
   这可能会干扰图片显示。建议将背景色设置在更具体的元素上，如body或header。 */
body {
    background-color: var(--dark);
}
/* 移除或修改 * 中的 background-color */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-style: italic;
    /* background-color: var(--dark); */ /* 移除或注释此行 */
}