在活动元素后面移动图像

Question

我有一个（垂直）链接列表。

可能是这样的：

<p>
    "2009"
    <a href="#">I got a hamster</a>
    <a href="#">I got another hamster</a>
</p>
<p>
    "2010"
    <a href="#">I got a cat</a>
</p>
<p>
    "2011"
    <a href="#">I got a dog</a>
</p>
<p>
    "2012"
    <a href="#">I got a horse</a>
</p>

<img scr="images/circle.png" />

当它们悬停或点击时，是否有可能在链接后面移动图像（例如，不是用颜色变换标记链接）。只使用CSS？漂亮的漂浮动作。

Answer 1

对于onClick，你需要有一个事件监听器。

for：hover你可以使用这样的东西：

@keyframes move {
from { z-index: 0; transform: scale(1); }
to { z-index: 4; transform: scale(2.5); }
}

http://codepen.io/chriscoyier/pen/gboJf

或者您可以使用CSS转换：

http://zomigi.com/blog/css3-transitions-and-z-index/