Question

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

鼠标悬停＆＃34;技术＆＃34;例如，它动画/滚动到不同的文本。除非需要javascript，否则CSS 3 / HTML5解决方案是理想的选择。

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;
}

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。

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

2 个答案: