Question

我正在尝试将div应用于动画，如果有人将鼠标悬停在图像上，该div应该会显示。我设法应用了块动画。就像我将鼠标悬停在图像上一样，动画也可以工作，但是一旦我将光标移开，它就会突然消失，就像它立即崩溃而没有任何动画一样，有一种方法可以应用动画或过渡将其移回[Display：none; ]。我的html和css代码在下面，我也可以使用javascript，但前提是我可以解释它，就像我应该能够掌握脚本中发生的事情一样。我知道我可以[可见性]属性并将其隐藏，但不会隐藏div我已经在多个站点上围绕google进行了多次搜索，但它们通常使用jQuary，但我不太了解，他们使用像素指定高度或宽度我不想使用的单位，因为我试图制作响应式页面，如果我以px

给出的话，该页面不会根据屏幕尺寸而改变

HTML代码

      <div class="Pro1">
        <img src="../Images/Products/Angel Electric.png" width="100%" height="Auto" alt="">
        <span class="txt">
          Some Description is suppose to show up for the bicycle if i Hover over the images :p
        </span>
      </div>

CSS

        .Pro1
        {
          width: 30%;
          margin: 0 2%;
          height: 100%;
          overflow: hidden;
          background-color: Grey;
        }
        .txt
        {
          display: none;
        }
        @-webkit-keyframes slide-down
        {
          0% { opacity: 0; -webkit-transform: translateY(-100%); }
          100% { opacity: 1; -webkit-transform: translateY(0); }
        }
        @-moz-keyframes slide-down
        {
              0% { opacity: 0; -moz-transform: translateY(-100%); }
            100% { opacity: 1; -moz-transform: translateY(0); }
        }
        .Pro1:hover .txt
        {
          display: block;
          -webkit-animation: slide-down .5s ease-out;
          -moz-animation: slide-down .5s ease-out;
        }

有没有一种方法可以将过渡动画应用于[Display：none;]属性

0 个答案: