两个元素处于不同div中时hover触发显示效果失效如何解决？

问题根因 #

你编写的.github:hover .githubT属于后代选择器，仅会匹配.github元素内部的.githubT节点。但在你的DOM结构中，.githubT是.float元素的紧邻兄弟节点，不属于.github的子元素，该选择器无法命中目标节点，因此hover效果不生效。

解决方案 #

方案1：纯CSS修改（适配现有结构）

将CSS文件中最后一段选择器替换为紧邻兄弟选择器即可，hover整个浮动容器时就会显示文本：

/* 替换原有的 .github:hover .githubT 规则 */
.float:hover + .githubT {
  visibility: visible;
}

如果后续可能在.float和.githubT之间插入其他节点，可以换成通用后继兄弟选择器：

.float:hover ~ .githubT {
  visibility: visible;
}

方案2：React状态控制（精准触发）

如果需要仅hover logo时才显示文本，不希望hover浮动容器其他区域触发效果，可以用React状态动态控制显隐：

import { useState } from 'react'
import styles from '../styles/Float.module.css'

export default function Connection(){
    const [showGithubTip, setShowGithubTip] = useState(false)
    return(
        <div className={styles.container}>
          <div className={styles.float}>
              <a href="https://github.com/YasamanForouzesh" target="_blank">
                  <img 
                    className={styles.github} 
                    src="/GitHub.png"
                    onMouseEnter={() => setShowGithubTip(true)}
                    onMouseLeave={() => setShowGithubTip(false)}
                  />
              </a>
          </div>
          <h1 
            className={`${styles["h1"]} ${styles["githubT"]}`}
            style={{ visibility: showGithubTip ? 'visible' : 'hidden' }}
          >GitHub</h1>
        </div>
    )
}

使用该方案可以删除CSS中原有的.github:hover .githubT规则。

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