텍스트/링크가 호버에 나타납니다

Question

행운을 내지 않고 here 및 here 해결책을 시도했습니다. 내 CSS 파일은 그대로 :

.JFK { 
    position: relative; 
    left: 250px; 
    height: 200px; 
    width: 200px; 
    bottom: -45px; 
    background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg); 
    line-height: 200px; 
    text-align: center; 
} 
.JFK a p{ 
    position: relative; 
    top: -130px; 
    display: none; 
} 
.JFK a:hover p{ 
    display: block; 
} 

.JFK:hover{ 
    opacity: 0.6; 
    display: block; 
} 

내 HTML : 내가 링크 호버시 이미지 하단에 나타나도록 노력하고

<div class = "JFK"> 
     <p>JFK</p> 
     <a href = "#"><p>to</p></a> 
     <a href = "#"><p>from</p></a> 
    </div> 

. 이전 게시물의 솔루션이 작동하지 않았습니다. 현재 설정을 사용하면 페이지를로드 할 때 "TO"또는 "FROM"을 전혀 볼 수 없습니다.

Answer 1

호버가 .JFK a이 아닌 .JFK에 있어야합니다 .JFK 위로 마우스를 이동하면 .JFK a p이 표시되어야합니다. https://jsfiddle.net/efv8ch70/

희망이

이 문제를 해결하기 위해 많은 방법이 있습니다

Answer 2

.JFK { 
 
    position: relative; 
 
    top: 50px; 
 
    left: 250px; 
 
    background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg); 
 
} 
 
.JFK, 
 
.JFK > p { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.JFK > p { 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: 0; 
 
} 
 

 
.link-wrapper { 
 
    display: none; 
 
} 
 

 
.JFK:hover .link-wrapper { 
 
    display: block; 
 
}

<div class="JFK"> 
 
    <p>JFK</p> 
 
    <div class="link-wrapper"> 
 
    <a href="#"><span>to</span></a> 
 
    <a href="#"><span>from</span></a> 
 
    </div> 
 
</div>

을하는 데 도움이 : 여기

.JFK:hover a p { 
    display: block; 
} 

는 변화와 jsfiddle에 대한 링크입니다. 이 솔루션은 단지 예일뿐입니다. 실제 단락은 .JFK와 동일한 높이를 가지므로 .link- 래퍼를 정상 흐름에서 원하는 지점으로 정확하게 푸시 다운합니다. 희망이 도움이되거나 당신에게 몇 가지 아이디어를 제공합니다.