两步点击交互流程异常：.logo元素无法显示求助

需求与问题 #

预期实现循环点击交互：

• 首次点击.imagenes元素：将其透明度设为0.1，显示.logo元素
• 再次点击.imagenes元素：恢复透明度为1，隐藏.logo元素

实际运行时，点击流程可循环，但.logo元素始终无法显示。

相关代码 #

JavaScript #

const imagenes = document.querySelectorAll('.imagenes');
const logos = document.querySelectorAll('.logo');

imagenes.forEach((imagen, index) => {
  let count = 0;
  imagen.addEventListener('click', () => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.1;
      logos[index].style.opacity = 1;
    } else {
      imagen.style.opacity = 1;
      logos[index].style.opacity = 0;
    }
    count++;
  });
});

CSS #

html {
      box-sizing: border-box;
      font-size: 16px;
    }
    
    body {
      max-width: 1500px;
      margin: 0 auto;
    }

    .gridA {
      display: grid;
      width: 50%;
      height: auto;
      grid-gap: .5rem;
      grid-auto-rows: minmax(auto, min-content);
      grid-template-columns: 1fr;
      margin-right: .25rem;
      overflow: hidden;
    }

    .gridB {
      display: grid;
      width: 50%;
      height: auto;
      grid-gap: .5rem;
      grid-auto-rows: minmax(auto, min-content);
      grid-template-columns: 1fr;
      margin-left: .25rem;
      overflow: hidden;
    }

    img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        max-height: 100%;
        overflow: hidden;
    }
    
    #A, #B {
      position: relative;
    }

    .logo {
      position: absolute;
      visibility: hidden;
      top:0;
    }

    .youtube-link {
        position: absolute;
        top: 80%;
        left: 39%;
        width: 15%;
        
    }
    
    .video-link {
        position: absolute;
        top:100%;
        width: 10%;
        left: 44%;
    }
    
    .youtube-link2 {
        position: absolute;
        top: 75%;
        left: 42%;
        width: 15%;
    } 
    
    .youtube-link2:hover {
        opacity: .6;
    }
    
    .video-link:hover {
        opacity: .6;
    } 
    
    .youtube-link:hover {
        opacity: .6;
    }

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="gridA">

<div id="A" class="box">
  
  <div class="imagenes">
    <img src="spotify-still.jpg">
  </div>
  
  <div class="logo">
    <img id="Alog" src="Spotify Logo (PNG720p) - Vector69Com.png">
      <a>
        <a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
          <img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
        </a>
      </a>
  </div>
</div>

<div ID="B" class="box">
  
  <div class="imagenes">
    <img src="audi-q3-1-by-marc-trautmann 2.jpg">
  </div>
  
  <div class="logo">
    <img id="Blog" src="Audi_logo_PNG3.png">
  </div>
</div>

</div>

<div class="gridB">
</div>

<script src="JS.js"></script> 
</body>
</html>

原因分析 #

核心问题在于CSS中.logo的样式设置：
.logo被添加了visibility: hidden属性，该属性会直接让元素从视觉上完全隐藏，且无法通过修改opacity来覆盖这个效果——opacity仅控制元素的透明度，元素本身仍处于隐藏状态，所以即使把opacity设为1，也看不到.logo。

解决方案 #

提供两种可行修复方式：

方式一：修改CSS基础样式 #

将.logo的visibility: hidden替换为opacity: 0，让JS的透明度控制逻辑直接生效：

.logo {
  position: absolute;
  opacity: 0; /* 替换原有的visibility: hidden */
  top:0;
}

方式二：在JS中同步修改visibility属性 #

保持原有CSS不变，在点击事件中同时修改visibility属性：

imagenes.forEach((imagen, index) => {
  let count = 0;
  imagen.addEventListener('click', () => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.1;
      logos[index].style.opacity = 1;
      logos[index].style.visibility = 'visible'; // 显示元素
    } else {
      imagen.style.opacity = 1;
      logos[index].style.opacity = 0;
      logos[index].style.visibility = 'hidden'; // 隐藏元素
    }
    count++;
  });
});

额外优化提示 #

HTML中存在嵌套<a>标签的错误（<a>内部不能嵌套<a>），虽然不影响当前交互，但不符合HTML规范，建议修正：

<!-- 修正前 -->
<a>
  <a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
    <img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
  </a>
</a>

<!-- 修正后 -->
<a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
  <img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
</a>

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