在this fiddle中,旗帜高出极点
当前转换
预期转型
并在过渡完成后恢复到预期位置,但我正在寻找平稳过渡,因为旗帜如何自然悬挂,有什么建议吗?我错过了什么吗?
为什么以下代码不起作用
#flag:hover{
top:50px;
left:100px;
-webkit-transform:rotate(0deg);
}
,而以下代码适用
#container:hover #flag{
top:50px;
left:100px;
-webkit-transform:rotate(0deg);
}
我不应该悬停在<image>
标签上吗? CSS不支持吗?
答案 0 :(得分:1)
我稍微更改了CSS以考虑更改:
#flag{
position:relative;
top: 43px;
left: 120px;
-webkit-transform-origin: -10px 0px;
-webkit-transform:rotate(90deg);
-webkit-transition-duration:0.5s;
-webkit-transition-timing:ease-in;
}
#post{
position:absolute;
top:50px;
left:50px;
}
#container:hover #flag{
top: 54px;
left: 104px;
-webkit-transform:rotate(0deg);
}
答案 1 :(得分:1)
回答问题#2
你的悬停不起作用的原因是因为标志位于轮询后面,所以它忽略了光标。
将以下内容添加到#post
pointer-events: none;