如何实现鼠标悬停导航栏链接时，图片在链接后方淡入显示？

先梳理你代码里的核心问题，再一步步实现淡入效果：

1. 修正HTML结构错误 #

你把img标签写在了a标签的属性里，这是无效的HTML语法，必须将img放到a标签内部：

<body>
  <header>
    <div class="navbar">
      <a href="#customs">
        customs
        <img src="Cloud.png" alt="Cloud icon">
      </a>
      <a href="#apparel">apparel</a>
      <a href="#about">about</a>
      <img src="logo.png" alt="Logo" class="header-logo">
      <a href="#news">news</a>
      <a href="#ethics">ethics</a>
      <a href="#contact">contact</a>
    </div>
  </header>
  <script src="script.js"></script>
</body>

注：script标签建议放在body末尾，避免阻塞DOM渲染

2. 调整CSS实现平滑淡入效果 #

display: none/block无法实现过渡动画，改用opacity结合transition属性来做淡入，同时通过定位让图片显示在链接文字后方：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif
}

.navbar {
  overflow: hidden;
  background-color: #f74178;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 0; /* 增加内边距避免内容拥挤 */
}

.navbar a {
  position: relative; /* 让内部图片可基于链接定位 */
  align-items: center;
  display: inline-flex;
  color: white;
  text-align: center;
  padding: 0; /* 替换无效的padding:none */
  margin: 0 2%; /* 缩小外边距防止导航换行 */
  text-decoration: none;
  font-size: 16px;
  font-family: monospace;
}

.navbar a img {
  opacity: 0; /* 初始完全透明 */
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%); /* 水平居中 */
  transition: opacity 0.3s ease; /* 0.3秒平滑过渡 */
  z-index: -1; /* 确保图片在文字后方 */
}

.navbar a:hover img {
  opacity: 1; /* 悬停时完全显示 */
}

.navbar a:hover {
  color: #b7fa00;
}

.navbar .header-logo {
  display: inline-block;
  width: 15%;
  cursor: pointer;
  vertical-align: middle; /* 和导航文字对齐 */
}

body {
  cursor: crosshair;
  padding-top: 60px; /* 避免内容被固定导航遮挡 */
}

关键修改说明 #

• 修复HTML结构，确保img标签在a标签内部
• 给a标签设置position: relative，为内部图片提供定位基准
• 用opacity替代display实现可过渡的显示/隐藏效果
• 通过绝对定位和z-index让图片固定在链接文字的下方
• 调整导航的内外边距，优化整体布局
• 给body添加顶部内边距，防止页面内容被固定导航栏覆盖

你可以直接把这个逻辑复制到其他导航链接上，只需在对应a标签内部添加img标签即可。

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