Question

我是编码新手，我正在做一件小事。我试图在单击此按钮时更改页面的背景。由于我不熟悉编码，我不知道正确的方法。任何建议都会有帮助。这是我在html＆amp;中所拥有的内容css到目前为止。

<div class="wrapper>
<p>Click on the button to see the magic happen!</p>
<input class="button" type="button" value="Click Me">

然后在CSS中我有以下内容：

.wrapper{
text-align: center;
}
.button{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #EE835A;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #EE8354A}

.button:active {
background-color: #4A6273;
box-shadow: 0 5px #F68B8B;
transform: translateY(4px);
}

Answer 1

花时间去做，你有一些错误，看一看。这也是一个纯CSS解决方案。

悬停颜色中有一个太多字符。应该有6个不是7.我用黑色＃000000替换它，因为我不确定你想要什么颜色。

此外，添加一个微妙的过渡是一个很好的外观。

transition: .3s

＆＃13;

.button:hover {background-color: #000000; transition: .3s}

body {background-color: white;}

.button:active {
background-color: #4A6273;
box-shadow: 0 5px #F68B8B;
transform: translateY(4px);
}

.wrapper{
text-align: center;
}
.button{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #EE835A;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
transition: .3s;
}

＆＃13;

<div class="wrapper">
<p>Click on the button to see the magic happen!</p>
<button class="button" onclick="document.body.style.backgroundColor = 'green';"></button>

＆＃13;

Answer 2

一个简单的JQuery脚本将实现这一目标：

$('.button').click(function(e){
    e.preventDefault();
    $('body').css({'background':'red'});
});

https://jsfiddle.net/f1rkyxs7/2/

单击按钮时更改背景颜色

2 个答案: