悬停上的文字覆盖

Question

到目前为止，我创建了一个container类，其中包含一个img元素和一个包含文本的div元素。我的目标是在用户将图像悬停在图像上时，图像变得苍白，一些文字出现在上方。

示例波纹管正在工作，但如果用户将鼠标悬停在包含文本的div上，div将消失。任何建议如何我可以禁用此行为？

#container { 
 
    position: relative; 
 
    width:500px; 
 
    height:auto; 
 
} 
 

 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
} 
 

 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 

 
#overlayImg:hover { 
 
    opacity: 0.3; 
 
} 
 

 
#center{ 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 

 
#overlayImg:hover + #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway" max-width="100px" max-height="100px"> 
 

 
    <div id="center" class="center"><h1>test test test<h1></div> 
 
</div>

Answer 1

您可以添加pointer-events: none到div

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: auto; 
 
} 
 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
    pointer-events: none; 
 
} 
 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 
#overlayImg:hover { 
 
    opacity: 0.3; 
 
} 
 
#center { 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; 
 
    /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 
#overlayImg:hover + #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway"> 
 

 
    <div id="center" class="center"> 
 
    <h1>test test test</h1> 
 
    </div> 
 
    
 
</div>

或更新:hover规则这样

#container:hover #overlayImg { 
    opacity: 0.3; 
} 
#container:hover #center { 
    opacity: 1; 
} 

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: auto; 
 
} 
 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
} 
 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 
#center { 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; 
 
    /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 
#container:hover #overlayImg { 
 
    opacity: 0.3; 
 
} 
 
#container:hover #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway"> 
 

 
    <div id="center" class="center"> 
 
    <h1>test test test</h1> 
 
    </div> 
 
    
 
</div>

旁注：

max-width="100px" max-height="100px"不喜欢你的工作的影像，他们要么应该是这样的，内联，

style="max-width:100px;max-height:100px" 

或外部，在CSS中（推荐）

#overlayImg { 
    width: 100%; 
    max-width: 100px; 
    max-height: 100px; 
    height: auto; 
    opacity: 1; 
    -webkit-transition: all 4s; 
    transition: all 0.5s; 
    transition-timing-function: ease; 
}