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向下推到正常流程中所需的位置。希望这有助于或给你一些想法。

悬停时显示文字/链接

2 个答案: