テキスト/リンクがホバーに表示されます

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ではありません.JFK a .JFKの上にマウスを移動すると、.JFK a pが表示されます。ここで

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

は変更にjsfiddleへのリンクです：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と同じ高さを持つので、.link-wrapperを通常のフローで必要な場所に正確にプッシュします。これが役に立ったり、あなたにいくつかのアイデアを提供してほしい。