在悬停时隐藏/显示文本 [英] Hide/show text on hover

问题描述

您好，我试图在图像悬停时隐藏/显示具有变换比例效果和阴影背景的绝对定位的文本，但z-index和div容器存在一些问题.我想达到的目标是:

Hello I'm trying to hide / display an absolute positioned text on image hover with transform scale effect and shadowing background I had some problems with z-index and div containers. What I'm trying to achive is:

悬停前:

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

Before hover:

On hover:
I know I could wrap text into div and then change visibility or display css property on hover but it doesn't work for me. Here is my code:

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

有人可以帮忙吗?

推荐答案

我不确定您要确切执行的操作，因此我认为最好找出要触发操作的元素，然后告诉该元素隐藏并显示文本.我也不确定您是否要尝试全部使用CSS，但是我通常会这样做.请注意，这是jQuery，如果您使用的是自举程序，我会假设您正在使用jQuery，这只是本示例中使用少量jQuery代码可以执行的操作的一个示例.这是指向有效小提琴的链接 http://jsfiddle.net/aq9Laaew/110775/我用来实现结果的代码:

I'm not sure what you're trying to do exactly, so I think it would be good to figure out what element you want to trigger the action on, then tell that element to hide and show the text. I'm also not sure if you're trying to do this all CSS or not, but I would typically do something like this. Be aware that this is jQuery, which I assume you're using if you're using bootstrap, and this is just an example of what you can do with a simple bit of jQuery code in this example. Here's a link to a working fiddle http://jsfiddle.net/aq9Laaew/110775/ and here's the code I used to achieve the result:

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

jQuery悬停处理程序实际上内部有2个函数，一个用于鼠标悬停(悬停开始)，一个用于鼠标悬停(悬停结束)，这使这很容易，因此您可以在开始做一件事(显示您的文本)，而另一件事最后(隐藏您的文本)全部通过一个漂亮的小包装函数实现.您也可以将它们分开，然后分别进行鼠标悬停和鼠标悬停.如果您要使用这种方法，我也将对CSS进行一些编辑，例如:

jQuery hover handler is actually 2 functions inside, one for mouseover (hover start) and one for mouseout (hover end), and it makes this easy, so you can do one thing on the start (show your text) and another on the end (hide your text) all in a nice little packaged function. You can also split these out and do mouseover and mouseout individually. I would also edit your CSS a little if you're going to use this approach, like this:

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

这篇关于在悬停时隐藏/显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！