如何在两个方向上显示隐藏文字

Question

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

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

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

before after也许我的描述不清楚，所以在这里我会详细说明。在我上传的图片中现在是悬停效果工作。我想改变的是让容器和隐藏文本沿着图片向下移动。就像在VR照片标题下写下一些内容一样。但它应该不在图片中。

Answer 1

添加此款式

.div-hover-item{padding:0;}

Answer 2

我不确定我明白了，也许你想要这样的东西？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

点击jQuery：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;