Css 将图像移动到活动元素后面

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

可能是这样的：

<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" />

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

"2009"


"2010"


"2011"


"2012"

---

当鼠标悬停在链接上或单击链接时，是否可能使图像移动到链接后面（例如，不使用颜色更改标记链接）。只使用CSS？具有良好的浮动运动。

对于onClick，您需要一个事件侦听器

对于：悬停您可以使用以下内容：

<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" />

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

或者您可以使用CSS转换：