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

Posted

技术标签:

【中文标题】HTML/CSS - 将鼠标悬停在照片上时显示链接【英文标题】:HTML/CSS - Display the link while hovering over a photo 【发布时间】:2020-12-04 16:15:49 【问题描述】:

我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链接本身(包含在图像 div 中)时才显示链接。任何想法我应该如何继续?

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

【问题讨论】:

所以悬停在外面? .portfolio-img-background:hover .portfolio-img-background:hover a ..... add style here.. 试试这个.. 【参考方案1】:

这是一个仅使用 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>

【讨论】:

【参考方案2】:

可以稍微修改代码底部的这个 CSS 类以使其正常工作。

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

【讨论】:

以上是关于HTML/CSS - 将鼠标悬停在照片上时显示链接的主要内容,如果未能解决你的问题,请参考以下文章

html/css:鼠标悬停时通过链接增加字体大小的位置移动

当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

将鼠标悬停在 iframe 上时如何显示文本

HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值

使用css将鼠标悬停在按钮上时如何更改站点背景图像?

将鼠标悬停在href上时如何显示文本