当两个项目位于不同的 div 中时，Hover over 不起作用？

Question

I want to hover over and show the text but text and logo are in the different div but when I hover over, it doesn't show the text.

import styles from '../styles/Float.module.css'
export default function COnnection(){
    return(
        <div className={styles.container}>

        <div className={styles.float}>

            <a href="https://github.com/YasamanForouzesh" target="_blank">
                <img className={styles.github} src="/GitHub.png"/>
            </a>
        </div>
        <h1 className={`${styles["h1"]} ${styles["githubT"]}`}>GitHub</h1>
        </div>
    )
}

I also tried display: none and display:block but it still doesn't work and it doesn't show text when I hover the logo

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  position: fixed;
  right: 0;
  margin-right: 20px;
  bottom: 0;
  margin-bottom: 40px;
}
.float {
  grid-column: 2;
  grid-row: 1/4;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  justify-content: center;
  border-radius: 30px;
  background-color: rgb(112, 100, 200);
  opacity: 0.5;
  width: 40px;
}

.github {
  width: 30px;
  height: 30px;
  grid-row: 2;
  margin-top: 20px;
}

.githubT {
  grid-column: 1;
  grid-row: 2;
  visibility: hidden;
}

.github:hover .githubT {
  visibility: visible;
}

here is my sandbox: https://codesandbox.io/s/unruffled-violet-nklue?file=/pages/index.js

Answer 1

You are currently using a parent selector to select the .githubT class when the .github class is hovered. When you select elements with the syntax: .class1.class2 you are selecting all elements with class2 that are descendants of class1.

Try putting the:hover pseudo class on your anchor tag and selecting .githubT using something like this:

a:hover+.githubT {
  visibility: visible;
}

(selects an element that comes immediately after the first element).