css 之:hover显示隐藏过渡

前言：我的需求是写一个盒子，鼠标移动上去显示一段文字，但是写完之后发现效果非常僵硬，效果很不好。于是想要加一个hover的过渡效果。

为什么第一次写的时候hover过渡非常僵硬呢，因为用的是 display：none；作为显示隐藏。用这个作为显示隐藏性能会好一些，但是用了这个效果会很僵硬。所以不能使用这个作为隐藏的方法。

于是乎想到了opacity：1；这个属性，将盒子透明化也是一种隐藏方式并且这个可以加入动画。于是乎完成了我想要的效果。

问题： 使用opacity 进行隐藏后用hover显示会有一个问题，即 当鼠标放在已经隐藏的盒子的时候，hover也会触发。暂时还没想到是什么原因，于是乎我用 z-index 优先级这个属性解决了这个bug。 有人知道的话，希望评论区能告诉我，感谢大佬，哈哈！

主要代码： 

transition: all .5s ease;

上代码：  以下就是全部代码

// 鼠标移动到文字上面去显示另外一个盒子

<div class="items_title">
     <div class="title">文字文字文字文字文字文字</div>
     <div class="hover_title">文字文字======================</div>
</div>


// css ======================================>

.items_title {
  position: relative;
  margin: 12px 0;
  width: 100%;
                
   &:hover .hover_title {   //sass 
      opacity: 1;
      z-index: 99;
    }
    .hover_title {
                  position: absolute;
                  top: -60px;
                  left: 50%;
                  opacity: 0;
                  transition: all .5s ease ;    //关键  
                  padding: 16px;
                  border-radius: 10px;
                  transform: translateX(-50%);   // 为了居中
                  white-space: nowrap;           // 只允许一行显示
                  color: #fff;
                  background-color: #39c5bb;
                  z-index: -1;               
                }
}