网站Logo鼠标悬停显示真实色彩实现方案咨询

数据老陈

2026-7-29

实现Logo默认灰色、悬停显示彩色的两种方案

针对多色彩Logo（比如Python的蓝黄Logo）无法通过单一颜色切换实现的需求，这里提供两种实用方案：

方案一：CSS滤镜法（推荐，无需额外制作灰度图）

直接使用彩色Logo原图，通过CSS的filter属性给元素添加灰度滤镜，鼠标悬停时移除滤镜即可。

代码示例

HTML结构

<div class="logo-container">
  <img src="python-logo.png" alt="Python Logo" class="color-logo">
</div>

CSS样式

.color-logo {
  /* 默认状态：100%灰度 */
  filter: grayscale(100%);
  transition: filter 0.3s ease; /* 添加过渡动画，让切换更平滑 */
}

.color-logo:hover {
  /* 悬停状态：移除灰度滤镜，显示原色彩 */
  filter: none;
}

说明

无需额外制作灰度图，节省工作量
transition属性可选，用于添加平滑的色彩过渡效果
兼容性：现代浏览器（Chrome、Firefox、Safari、Edge）均支持，IE浏览器不兼容filter属性

方案二：双图切换法（兼容所有场景）

如果需要兼容老旧浏览器，或者对滤镜效果不满意，可以准备两张图（灰度版+彩色版），通过CSS控制显示切换。

代码示例

HTML结构

<div class="logo-wrapper">
  <img src="python-logo-gray.png" alt="Python Logo" class="gray-logo">
  <img src="python-logo-color.png" alt="Python Logo" class="color-logo">
</div>

CSS样式

.logo-wrapper {
  position: relative;
  width: 120px; /* 根据你的Logo尺寸设置 */
  height: 120px;
}

.logo-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.gray-logo {
  /* 默认显示灰度图 */
  opacity: 1;
}

.color-logo {
  /* 默认隐藏彩色图 */
  opacity: 0;
}

.logo-wrapper:hover .gray-logo {
  opacity: 0;
}

.logo-wrapper:hover .color-logo {
  opacity: 1;
}