HTML/CSS - 将鼠标悬停在照片上时显示 link

Question

我希望在将鼠标悬停在图像上时显示我的 link。只有当我将鼠标悬停在 link 本身（包含在图像 div 中）时，我编写代码的方式才会显示 link。我应该如何继续下去？

.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>

HTML/CSS - 将鼠标悬停在照片上时显示 link

HTML/CSS - Display the link while hovering over a photo

html

javascript

css

hyperlink

hover