将鼠标悬停在另一个div上时显示div（这在CSS中是动画的）

Question

我有一个div / image：.drop我想要一些文字显示：.text_drop将鼠标悬停在它上面。 .drop是一张图片，.text_drop也是如此，但.drop:hover也有一个动画。无论如何，当鼠标悬停在.text_drop上时，.drop不显示。

代码如下：

.drop {
    position: absolute;
    z-index: 3;
    width: 15vw;
    height: auto;
    top: 75vw;
    left: 0vw;
}
.text_drop {
    position: absolute;
    z-index: 3;
    width: 15vw;
    height: auto;
    top:90vw;
    left: 0vw;
}

.drop:hover {
    -webkit-animation-name: puls;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate-reverse;
}

@-webkit-keyframes puls {
    from{
        transform: scale(0.9);
    }
    to{
        transform: scale(1);
    }    
}

Answer 1

$('.container1').hover(function() {

  $('.container2').show();

}, function() {

  $('.container2').hide();

});

.drop {
  background-image: url('http://www.google.com/images/google_favicon_128.png');
  display: inline-block;
  width: 116px;
  height: 116px;
}
.text_drop {
  background-image: url('https://www.resiprocate.org/images/8/81/Symbol-warning-small.png');
  display: inline-block;
  width: 40px;
  height: 36px;
  margin-right:5px;
}
.drop:hover {
  -webkit-animation-name: puls;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate-reverse;
}
@-webkit-keyframes puls {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1"><span class="drop"></span>
</div>
<div class="container2" style="display:none;"><span class="text_drop"></span><span>some text</span>
</div>