css - 没有 JavaScript 的只有 CSS 的两种状态翻转

Question

我正在尝试创建一个双态 CSS 翻转，所以当用户在一个框上滚动时，框会改变颜色并且另一个图像出现在侧面，当他们将图像滚到侧面时它会消失并且框恢复到原始状态。

我正在处理的页面在这里:

http://www.philippedollo.com/assign.htm

没有 JavaScript，是否有任何符合标准的方法来做到这一点？

Answer 1

下面是一个在 CSS 中使用链接和悬停属性的简单示例。您必须将 .twoStateInner span 替换为您的图像(并向其添加 float:left，更改其顺序和other span 以交换图像将出现的边)，并根据需要在 .twoState:hover CSS 中更改颜色。

HTML:

<a class="twoState" href="javascript:void(0);">
    <span>text&nbsp;</span>
    <span class="twoStateInner">foo</span>
</a>

CSS:

.twoStateInner {
    display: none;
}

.twoState div {
    float: left;
}

.twoState:hover .twoStateInner {
    display: block;
}

.twoState:hover {
    color: red;
}

此外，here这是一个 fiddle ，您可以在其中看到它的实际效果。

更新:

根据 Smirkin Gherkin 的评论，将链接中的 div 标签更改为 span 标签，因为链接中的 spans 符合标准。