HTML/CSS - 將鼠標懸停在照片上時顯示鏈接

Question

當我在圖像上 hover 時，我希望顯示我的鏈接。 我編寫代碼的方式僅在我通過鏈接本身（包含在圖像 div 中）上 hover 時才顯示鏈接。 任何想法我應該如何 go 上？

 .image-text-wrapper { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding-left: 100px; padding-right: 100px; font-size: 1.5em; }.image-text-wrapper.xx { transition: 1s; font-weight: 600; margin: 20px; }.image-text-wrapper.xx a { color: transparent;important. }:image-text-wrapper a:hover { color; lightseagreen:important; text-decoration: none; }

 <div class="portfolio-img-background" style="background-image:url()"> <div class="xx"> <a href="#"> Text </a> </div> </div>

Answer 1

可以稍微修改代碼底部的 CSS class 以使其正常工作。

.image-text-wrapper:hover a {
  color: lightseagreen !important;
  text-decoration: none;
}

Answer 2

這是僅使用 CSS 的解決方案

 #image{ width:200px; height:200px; background:black; display:flex; align-items:center; justify-content: center; } #link{ display:none; } #image:hover > #link { display:block; }

 <div id="image" class="portfolio-img-background" style="background-image:url()"> <div class="xx" id="link"> <a href="#"> Hi,, im a link </a> </div> </div>