Question

我想显示我的简历的一部分，鼠标悬停在“简历”上，然后显示详细信息。我管理了第一部分，但是当鼠标离开div时，这太粗糙了。

在这里看看：https://codepen.io/Lynkas/pen/wRdger

谢谢♥

<div class="contenu">
        <div class="cv"><span>CV →</span>
            <div class="cvv">
                <h1>EXPÉRIENCES</h1>
                <table class='mttb'>
                    <tr class='mttr'>
                        <td class='mttd'><b>AOÛT 2016</b></td>
                        <td class='mttd'><b>JOB D'ÉTÉ , BUREAU INFORMATION JEUNESSE<br>LES MUREAUX</b></td>
                    </tr>
                    <tr class='mttr'>
                        <td class='mttd'><b>JANVIER - JUIN 2016</b></td>
                        <td class='mttd'><b>BÉNÉVOLAT (78)</b><br><br>• A.P.I. (Atelier Pédagogique Individualisé)<br>animation d’un atelier découverte de l’informatique<br><br>• Mission locale + i.M.E. alfred binet<br>+ A.C.R. (Agir Combattre Réunir)<br>création de flyers, affiches et faire-parts<br>montage d’une vidéo</td>
                    </tr>
                    <tr class='mttr'>
                        <td class='mttd'><b>MARS - AVRIL 2016</b></td>
                        <td class='mttd'><b>DIAM (ENTREPRISE PLURISDISCIPLINAIRE)<br>LES MUREAUX</b><br><br>• web : création d’un prototype d’une matériauthèque web<br><br>• communication audiovisuelle :<br>montage vidéo : découpe, disposition<br>retouche colorimétrique<br><br>• communication visuelle :<br>création d’une carte géographique avec géolocalisation<br>des objectifs, présentations PowerPoint</td>
                    </tr>
                </table>
            </div>`

Answer 1

使用transition代替animation

Working code

.contenu {
    margin-left: 150px;
    padding: 100px;
}

.cv {
    background: #27ae60;
    padding: 10px;
    height: 20px;
    width: 50px;
    overflow: hidden;
    transition: height 1s 0.2s,width 1s;}

.cv:hover {
   height: 630px;
   width:auto;
}

.cv span {
    color: white;
}

.cvv {
    width: 50%;
}

h1 {
    position: relative;
    left: 10px;
    color: white;
    font-size: 20pt;
    font-weight: normal;
}

.mttb{
}
.mttb th{
}
.mttb td {
    padding: 10px;
    vertical-align: top;
}

<div class="contenu">
	<div class="cv"><span>CV →</span>
	<div class="cvv">
	<h1>EXPÉRIENCES</h1>
	<table class='mttb'>
	<tr class='mttr'>
	<td class='mttd'><b>AOÛT 2016</b></td>
	<td class='mttd'><b>JOB D'ÉTÉ , BUREAU INFORMATION JEUNESSE<br>LES MUREAUX</b></td>
	</tr>
	<tr class='mttr'>
	<td class='mttd'><b>JANVIER - JUIN 2016</b></td>
	<td class='mttd'><b>BÉNÉVOLAT (78)</b><br><br>• A.P.I. (Atelier Pédagogique Individualisé)<br>animation d’un atelier découverte de l’informatique<br><br>• Mission locale + i.M.E. alfred binet<br>+ A.C.R. (Agir Combattre Réunir)<br>création de flyers, affiches et faire-parts<br>montage d’une vidéo</td>
	</tr>
	<tr class='mttr'>
	<td class='mttd'><b>MARS - AVRIL 2016</b></td>
	<td class='mttd'><b>DIAM (ENTREPRISE PLURISDISCIPLINAIRE)<br>LES MUREAUX</b><br><br>• web : création d’un prototype d’une matériauthèque web<br><br>• communication audiovisuelle :<br>montage vidéo : découpe, disposition<br>retouche colorimétrique<br><br>• communication visuelle :<br>création d’une carte géographique avec géolocalisation<br>des objectifs, présentations PowerPoint</td>
	</tr>
</table>
</div>

Answer 2

欢迎使用StackOverflow。我知道你在做什么可能的解决方案是：

1。具有“过渡”属性的解决方案：

transition: width, height 0.5s ease;/*1.here you specify the attributes you want the transition on*//*2.the length of the transition animation*//*3.the type of transition(e.g. liner, ease, boolean*/

2。 “动画”解决方案

之所以没有在代码中执行动画cvOut，是因为您没有指定何时执行此操作。您需要声明，当元素没有悬停时，动画cvOut应该开始。看起来像这里：

.cv:not(:hover) {
  animation: cvout 1s;
}

我希望这会有所帮助，让我知道您是否还想要其他东西！

Answer 3

好，谢谢你们！我发现一些有趣的问题，问题是宽度：自动

.cv:hover {
height: 630px;
width: auto;}

所以我将其替换为宽度：100％

.cv:hover {
height: 630px;
width: 100%;}

成功了！但是，当鼠标离开时，我需要反向动画。当鼠标打开时：宽度和高度;当鼠标离开高度然后离开宽度时。有可能吗？

.cv {
background: #27ae60;
padding: 10px;
height: 20px;
width: 50px;
overflow: hidden;
transition: width 1s ease, height 3s 1s ease;}

.cv:hover {
height: 630px;
width: 100%;}

Answer 4

我找到了解决方法

.cv {
background: #27ae60;
padding: 10px;
height: 20px;
width: 50px;
overflow: hidden;
transition: height .5s ease, width 1s .5s ease;}

.cv:hover {
height: 630px;
width: 100%;
transition: width .5s ease, height 1s .5s ease;}

仅在CSS中提供MouseIn和MouseOut动画

4 个答案:

1。具有“过渡”属性的解决方案：

2。 “动画”解决方案