在悬停时隐藏/显示文字

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，这只是在此示例中可以使用少量jQuery代码执行的示例。这是一个有效的小提琴http://jsfiddle.net/aq9Laaew/110775/的链接，这是我用来获得结果的代码：

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

jQuery悬停处理程序实际上内部有2个函数，一个用于鼠标悬停（悬停开始），一个用于鼠标悬停（悬停结束），这使这很容易，因此您可以在开始时做一件事（显示您的文本），而另一件事最后（隐藏您的文本）全部通过一个漂亮的小包装函数实现。您也可以将它们分开，然后分别进行鼠标悬停和鼠标悬停。如果您要使用这种方法，我也会对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">