Hover Effect Not Working With media query

Question

I have already checked the questions on this, but I have found no solution to my problem.

The question I have is, I have to add a hover effect in the media request and I've already done it and but it doesn't work properly.

I tried changing the values of the z-index, but it doesn't work.

body{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.container{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, #ade76d, #5f49bb);
}
.text-container{
    height: 90vh;
    display: flex;
    align-items:center;
    justify-content: space-around;
}
#color-code{
    color: white;
    font-size: 1.2rem;
}
#click{
    background: none;
    padding: 1rem;
    border: none;
    color: white;
    outline: none;
}
#click:hover{
    cursor: pointer;
}
#click:active{
    animation: rotation 200ms linear;
}
#pressSpace{
    display: none;
}
#tooltip{
   visibility: hidden;
}




/* .rotate{
    animation: rotation 2s linear;
} */

@keyframes rotation {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(90deg);
    }
}

/* Responsive properties */

@media only screen and (min-width:740px)  {
    .text-container{
        justify-content: center;
    }
    #color-code{
        font-size: 2rem;
    }
    #tooltip{
        position: absolute;
        top: 240px;
        left: 340px;
        color: white;
        background: black;
        padding: 0.4rem;
        border-radius: 0.3rem;

    }
    #color-code:hover #tooltip{
        visibility: visible;
        z-index:200
    }
    
}

@media (min-width: 992px) { 
    #pressSpace{
        display: block;
        color: white;
    }
 }

    <div class="container" id="container">
        <div class="text-container">
            <div id="color-code" >
                linear-gradient(to right, #ade76d, #5f49bb)
            </div>
        <button id="click"><i class="fas fa-sync fa-lg"></i></button>
          
        </div>
        <div id="tooltip">
            Click to Copy
        </div>
    </div>
    
    <script src="script.js"></script>
</body>

Answer 1

Your code #color-code:hover #tooltip { means that the tooltip should be within the #color-code element. But it isn't at the moment so it would never trigger the hover effect on the tooltip.

In the example below you can see that the hover works when you move the #tooltip element inside the <div id="color-code" >. Then the hover effect works and the tooltip will be visible (check the large view).

body{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.container{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, #ade76d, #5f49bb);
}
.text-container{
    height: 90vh;
    display: flex;
    align-items:center;
    justify-content: space-around;
}
#color-code{
    color: white;
    font-size: 1.2rem;
}
#click{
    background: none;
    padding: 1rem;
    border: none;
    color: white;
    outline: none;
}
#click:hover{
    cursor: pointer;
}
#click:active{
    animation: rotation 200ms linear;
}
#pressSpace{
    display: none;
}
#tooltip{
   visibility: hidden;
}




/* .rotate{
    animation: rotation 2s linear;
} */

@keyframes rotation {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(90deg);
    }
}

/* Responsive properties */

@media only screen and (min-width:740px)  {
    .text-container{
        justify-content: center;
    }
    #color-code{
        font-size: 2rem;
    }
    #tooltip{
        position: absolute;
        top: 240px;
        left: 340px;
        color: white;
        background: black;
        padding: 0.4rem;
        border-radius: 0.3rem;

    }
    #color-code:hover #tooltip{
        visibility: visible;
        z-index:200
    }
    
}

@media (min-width: 992px) { 
    #pressSpace{
        display: block;
        color: white;
    }
 }

    <div class="container" id="container">
        <div class="text-container">
            <div id="color-code" >
                linear-gradient(to right, #ade76d, #5f49bb)
                <div id="tooltip">
                    Click to Copy
                </div>
            </div>
        <button id="click"><i class="fas fa-sync fa-lg"></i></button>
          
        </div>
    </div>
    
    <script src="script.js"></script>
</body>

Answer 2

Since #color-code & #tooltip are not at the same level

#color-code:hover #tooltip{
 ...
}

Could not work

---

If you want to do it in CSS only you can restructure your HTML to do so

PS: I change the media query to 500px to see it on SO

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #ade76d, #5f49bb);
}

.text-container {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#color-code {
  color: white;
  font-size: 1.2rem;
}

#click {
  background: none;
  padding: 1rem;
  border: none;
  color: white;
  outline: none;
}

#click:hover {
  cursor: pointer;
}

#click:active {
  animation: rotation 200ms linear;
}

#pressSpace {
  display: none;
}

#tooltip {
  visibility: hidden;
}


/* .rotate{
    animation: rotation 2s linear;
} */

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90deg);
  }
}


/* Responsive properties */

@media only screen and (min-width:500px) {
  .text-container {
    justify-content: center;
  }
  #color-code {
    font-size: 2rem;
    color: red;
  }
  #tooltip {
    position: absolute;
    top: 140px;
    left: 340px;
    color: white;
    background: black;
    padding: 0.4rem;
    border-radius: 0.3rem;
  }
  #color-code:hover + #tooltip {
    visibility: visible;
  }
}

@media (min-width: 992px) {
  #pressSpace {
    display: block;
    color: white;
  }
}

<div class="container" id="container">
  <div class="text-container">
    <div id="color-code">
      linear-gradient(to right, #ade76d, #5f49bb)
    </div>
    <div id="tooltip">
      Click to Copy
    </div>
    <button id="click"><i class="fas fa-sync fa-lg"></i></button>
  </div>

</div>

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