在活动元素后面移动图像

时间:2014-08-09 12:12:00

标签: css3

我有一个(垂直)链接列表。

可能是这样的:

<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?漂亮的漂浮动作。

1 个答案:

答案 0 :(得分: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/