html - 如何制作鼠标悬停更改按钮？

Question

如何制作如下所示的鼠标悬停更改按钮: https://www.kickstarter.com/discover?ref=nav

例如，当您将鼠标悬停在“技术”上时，它会动画/滚动到不同的文本。 CSS3/HTML5 解决方案是理想的，除非需要 javascript。

Answer 1

您应该编写自己的代码。无论如何，这里有一个带有简单示例的 jsfiddle:https://jsfiddle.net/kya6skp1/

HTML

<div class="wrap">
    <div class="text main">Text 1</div>
    <div class="text secondary">Text 2</div>
</div>

CSS

.wrap {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.text {
    transition: top 300ms linear;
    position: absolute;
    z-index: 1;
    left: 0;
    width: 200px;
    height: 200px;
}
.text.main {
    top: 0;
}
.wrap:hover .text.main {
    top: -100%;
}
.text.secondary {
    top: 100%;
}
.wrap:hover .text.secondary {
    top: 0;
}