悬停时隐藏/显示文本

Question

您好，我正在尝试使用变换缩放效果和阴影背景在图像悬停时隐藏/显示绝对定位的文本，我在使用 z-index 和 div 容器时遇到了一些问题。我想要实现的是：

悬停前：

悬停时：
我知道我可以将文本包装到 div 中，然后在悬停时更改可见性或显示 css 属性，但这对我不起作用。这是我的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-lg-4 column" *ngFor="let clientProject of clientProjects; let i= index">
      <button class="btn button-modal" data-toggle="modal" [attr.data-target]="'#' + i">
          <span class="hidden-text">TEXT</span>
        <img src="{{clientProject.clickImageButtonPath}}" class="img-fluid image">
      </button>
    </div>
  </div>
</div>

css:

.image {
  width: 100%;
  height: 400px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  opacity: 0.35;

}

.button-modal {
  padding: 0 !important;
  overflow: hidden;
  background-color: black;
}


.button-modal:hover {
  padding: 0 !important;
}

.hidden-text:hover + .image,
.image:hover {
  transform: scale(1.2);
}

.column {
  margin: 0 !important;
  border: none;
  padding: 0 !important;
}

.hidden-text {
  display: block;
  z-index: 2;
  color: white;
  font-size: 2rem;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  position: absolute !important;
}

有人可以帮忙吗？

Answer 1

我不确定你到底想做什么，所以我认为最好弄清楚你想要触发动作的元素，然后告诉那个元素隐藏和显示文本。我也不确定您是否尝试全部使用 CSS，但我通常会这样做。请注意，这是 jQuery，如果您正在使用引导程序，我假设您正在使用它，这只是您可以在本示例中使用一些简单的 jQuery 代码执行的一个示例。这是一个工作小提琴http://jsfiddle.net/aq9Laaew/110775/ 的链接，这是我用来实现结果的代码：

$('.button-modal').hover(function(event){
    $(this).find('.hidden-text').show();
},function(){
    $(this).find('.hidden-text').hide();
});

jQuery 悬停处理程序实际上有 2 个函数，一个用于 mouseover（悬停开始）和一个用于 mouseout（悬停结束），它使这很容易，所以你可以在开始时做一件事（显示你的文本）和另一个最后（隐藏您的文本）都在一个不错的小包装功能中。您也可以将它们分开并单独执行 mouseover 和 mouseout。如果您要使用这种方法，我还会稍微编辑您的 CSS，如下所示：

.button-modal:hover {
    padding: 0 !important;
    transform: scale(1.2);
}

.column {
    margin: 0 !important;
    border: none;
    padding: 0 !important;
}

.hidden-text {
    display: none;
    z-index: 2;
    color: white;
    font-size: 2rem;
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    position: absolute !important;
}

Answer 2

试试这个：

<style type="text/stylesheet">
  .container:hover #cts {
    display: block;
  }
</style>
<div class="container">
  <div class="img" style="position: absolute; width: 500px; height: 500px; z-index:0;">
    <img src="https://i.stack.imgur.com/Az76Y.png"></img>
  </div>
  <div id="cts" class="text-box" style="display: none; position: absolute; display: table; margin-left: auto; margin-right: auto; background: rgba(0,0,0,0.4); text-align: center; height: 500px; width: 500px; z-index: 1; transition: all .3s ease;">
    <div class="text-box-inner" style="display: table-cell; height: 500px; width: 500px; vertical-align: middle; margin-left: auto; margin-right: auto;">
      <span class="text" style="color: #fff;">ANY TEXT</span>
    </div>
  </div>
</div>
<script type="text/javascript">