Question

我正在尝试做一个过渡，它出现在下面但是我没有得到它。

我只想使用CSS，没有jquery或js。悬停有效，但不是过渡。

任何人都可以帮助我？

编辑：有人喜欢这样：link。以下示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

不确定您要尝试应用转换，但通常您已经在＆＃34; normal＆＃34;中定义了该属性。状态和悬停状态。

示例：

<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/

转移css与悬停

1 个答案: