懸停上的文字覆蓋

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; 
}