html - 如何在两个方向上显示隐藏文本

Question

.hidden-text {
    display: none;
    visibility: hidden;
}
.div-hover-item:hover .hidden-text {
    display: block;
    visibility: visible;
}

我正在尝试实现当光标悬停在文本周围时，隐藏的文本会显示出来的功能。这是代码，它确实有效。

现在，当您在文本周围移动光标时，隐藏文本将显示在顶部方向，但我想将方向更改为机器人，这意味着当您将鼠标悬停在文本上时，隐藏文本将显示下来，不是顶部。

before after可能我描述的不是很清楚，所以在这里我会说更多的细节。在我上传的图片中，悬停效果现在起作用了。我想要更改的是使容器和隐藏文本从图片中消失。这就像在 VR 照片标题下写下一些东西。但它应该不在图片中。

Answer 1

我不确定我是否理解，也许你想要这样的东西？

body {
  margin: 0
}

img {
  margin: 0;
  position: relative;
  z-index: 10;
}

p {
  position: relative;
  padding: 5px;
  margin: 0;
  z-index: 10;
  background: gray;
}

.hidden-text {
  z-index: 1;
  position: relative;
  top: -50px;
  transition: all 1s ease;
}

.div-hover-item {
  width: 400px;
  margin-top: -5px;
}

.div-hover-item:hover .hidden-text {
  display: block;
  top: 0;
}

<img src="http://placehold.it/400x200">
<div class="div-hover-item">
  <p>Lorem ipsum dolor sit amet</p>
  <p class="hidden-text">consectetur adipisicing eli</p>
</div>

更新

使用 jQuery 点击时:

$(".div-hover-item").click(function() {
  if ($(".hidden-text").hasClass("show")) {
    $(".hidden-text").removeClass("show");
  } else
    $(".hidden-text").addClass("show");
});

body {
  margin: 0
}

img {
  margin: 0;
  position: relative;
  z-index: 10;
}

p {
  position: relative;
  padding: 5px;
  margin: 0;
  z-index: 10;
  background: gray;
}

.hidden-text {
  z-index: 1;
  position: relative;
  top: -50px;
  transition: all 1s ease;
}

.div-hover-item {
  width: 400px;
  margin-top: -5px;
}

.hidden-text.show {
  display: block;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/400x200">
<div class="div-hover-item">
  <p>Lorem ipsum dolor sit amet</p>
  <p class="hidden-text">consectetur adipisicing eli</p>
</div>