悬停效果不适用于媒体查询

Question

我已经检查了这个问题，但是我没有找到解决问题的方法。

我的问题是，我必须在媒体请求中添加悬停效果，我已经这样做了，但是它不能正常工作。

我尝试改变z-index的值，但它不起作用。

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

code #color-code:hover #tooltip{表示工具提示应该位于#color-code元素中。但是现在还没有，所以它永远不会触发工具提示上的悬停效果。

在下面的示例中，您可以看到当您将#tooltip元素移动到<div id="color-code" >中时悬停工作。然后悬停效果生效，工具提示将是可见的(检查大视图)。

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

自#color-code&#tooltip不在同一水平

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

不能工作

---

如果你想在CSS中做到这一点，你可以重构你的HTML来做到这一点

PS:我将媒体查询设置为500px，以便在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>