Question

我希望将鼠标悬停在我的div上我的div代码

<div class="CastData">
    <a href="Artist.php?ArtistID=0000701" >
        <div class="CastImage">
           <img src="Public/Cast/0000701 - Kate Winslet.jpg" width="40" height="40" />
       </div>          
       <div class="CastName">
           Kate Winslet
     </a>
     <br />
     <small>Jeanine</small></div>
</div>

这是我的css代码

.CastImage, .CastName{
    display: inline-block;
    vertical-align:middle;
    margin:10px 10px 10px 0px;
}

.CastImage img{
    border-radius:100%;
}

.CastData{
    border-bottom: 1px solid #EEEEEE;
    }

.CastData > * {
    transition:all 0.5s ease;
}

.CastData:hover > *{
    padding-right:10px;
    transform: scale(1.2);
}

当我悬停在我的div上时，每个东西都会增长，然后文字在悬停时仍然很大，而且图像会重置为以前的大小，为什么？ 忽略我的链接属性，它在div中间关闭，我只想要真实姓名和图片作为链接，并将名称转换为简单文本

Answer 1

你错过了

animation-fill-mode: forwards;

你的CSS中的

属性。尝试一下：悬停伪类，让我知道它是否成功。

Answer 2

有一个小故障，但试试这个Fiddle

＆＃13;

.CastImage, .CastName{
    display: inline-block;
    vertical-align:middle;
    margin:10px 10px 10px 0px;
}

.CastImage img{
    border-radius:100%;
}

.CastData{
    border-bottom: 1px solid #EEEEEE;
    }

.CastData > * {
    transition:all 0.5s ease;
}

.CastData:hover  *{
    padding-right:10px;
    transform: scale(1.2);
}

＆＃13;

<div class="CastData">
    <a href="Artist.php?ArtistID=0000701" >
        <div class="CastImage">
           <img src="Public/Cast/0000701 - Kate Winslet.jpg" width="40" height="40" />
       </div>          
       <div class="CastName">
           Kate Winslet
     </a>
     <br />
     <small>Jeanine</small></div>
</div>

＆＃13;

转换后的图像重置为css

2 个答案: