ホバリングを使用したCSSの切り替え

Question

私はトランジションを試みていますが、それは遅れて の下に出てきますが、私はそれを取得しません。

私はCSS、jquery、またはjsを使用しません。 ホバーは動作しますが、トランジションは動作しません。

誰でも手伝ってもらえますか？

編集：このようなもの：​​

.tools-link { 
 
    text-align: center; 
 
} 
 
.tools { 
 
    margin: 15px 0; 
 
    text-align: center; 
 
    height: 280px; 
 
    overflow: hidden; 
 
} 
 
.tool-dedicaciones-slide-title { 
 
    height: 50px; 
 
    margin: 20px 0 5px; 
 
    width: 100%; 
 
    top: 50%; 
 
    transform: translateY(25%); 
 
} 
 
.tool-dedicaciones-slide { 
 
    padding: 10px 10%; 
 
    background-color: #fff; 
 
    height: 100%; 
 
} 
 
.tool-dedicaciones-slide:hover { 
 
    position: absolute; 
 
    top: 0; 
 
    transition: all .4s ease-in-out .1s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
        <div class="col-xs-12 col-sm-6 col-md-15 tools tool-dedicaciones"> 
 
         <a class="remove-underline tools-link" href=""> 
 
          <!-- <img src="/assets/img/tools/01-maiap-02.png" class="image-dedicaciones"/> --> 
 
          <div style="background-color: #725d98; height: 200px; "></div> 
 
          <div class="tool-dedicaciones-slide"> 
 
           <div class="tool-dedicaciones-slide-title" >Dedicacion@s</div> 
 
           <div class="tool-dedicaciones-slide-description"> 
 
            <p>Herramienta para el control y la gestión de dedicaciones profesionales. Autentificación y autorización en servicios terceros. Control de caducidad del Token de sesión. BDD encriptada.</p> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div>

Answer 1

トランジションを適用しようとしているが、一般的にあなたが持っている「正常な」状態とホバー状態の両方でプロパティを定義何をすべきかわからない以下の例。

例：

<style> 
.box { 
    width:500px; 
    height:500px; 
    background-color:blue; 
    transition:0.5s all 0.5s; 
} 
.box:hover { 
    background-color:red; 
} 
</style> 
<div class="box"></div> 

https://jsfiddle.net/7zszjbw0/