如何制作鼠标切换按钮？

Question

如何使鼠标切换按钮如下所示：https://www.kickstarter.com/discover?ref=nav

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

Answer 1

你应该自己写代码..。总之，下面是一个简单的例子：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;
}

Answer 2

您可以在CSS或JavaScript中这样做，但是使用CSS只允许您更改样式，您想要的滚动部分需要JavaScript。不过，我会告诉你用两种语言怎么做。请记住，它不应该构成代码的一个重要部分，因为如果您计划将页面放到网络上，它将不适用于没有鼠标的平板/移动电话。顺便说一句，我假设你的按钮只是按钮类型的输入。不管怎样..。

CSS：

<style>
    #theIDOfMyInput 
    {
        //This is the default style
    }
    #theIDOfMyInput:hover
    {
        //This is the style that appears when your mouse is over the button
    }
</style>

JavaScript

在声明输入的标记中，编写：

<input type="button" onMouseOver="MyFunction()">

然后向脚本中添加一个名为MyFunction()的函数，并使其影响按钮，可能会使用DOM来更改它的innerHTML。