使用Javascript我可以改变悬停和焦点的样式吗？

我试图使一个按钮，将改变页面的颜色方案的页面。正如你在这里看到的那样，我已经让它工作了很多。然而，我似乎无法得到任何工作的悬停onmouseover。我希望仍然能够风格的按钮和重点领域。我整天都在用Javascript寻找解决方案，但一点运气都没有

编辑：为了澄清，我不希望使用onmouseover函数来更改页面的样式。我希望有样式的变化发生，和按钮标记为“按钮”有一个onmouseover的变化。一开始是两种深浅的蓝色。但我希望它能有两种其他颜色

我试过了

var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "black";
}  

但是当添加到整个代码中时，它就完全崩溃了

这是我一直在做的事情

<style>

body {
background-color: #ec7c23;
}
.btn-group button {
background-color: #577CC1; 
border: 1px #577CC1; 
color: white; 
padding: 10px 24px; 
cursor: pointer; 
float: left; 
font-weight: bold;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #2C3E60;
}



textarea[type="textarea"] {
width: ;
padding: 5px 10px;
margin: 5px 0;
box-sizing: border-box;
font-family: arial;
font-weight: bold;  
border: 10px;
background-color: #F4F6FA;
color: darkblue; 
border: 4px solid #577CC1;
border-radius: 4px;
}
textarea[type="textarea"]:focus {
border: 4px solid #e66026;
}


h1 {
line-height: 1.25;
margin: 2em 0 0;
}
p {
margin: .5em 0;
}
#switcher {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#switcher li {
float: left;
width: 30px;
height: 30px;
margin: 0 15px 15px 0;
border-radius: 30px;
border: 3px solid black;
}
#blackButton {
background: grey;
}
#orangeButton {
background: #ec7c23;
}
</style>

身体{
背景色：#ec7c23；
}
.btn组按钮{
背景色：#577CC1；
边界：1px#577CC1；
颜色：白色；
填充：10px 24px；
光标：指针；
浮动：左；
字体大小：粗体；
}
.btn组：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.btn组按钮：非（：最后一个子项）{
边界权：无；
}
.btn组按钮：悬停{
背景色：#2C3E60；
}
textarea[type=“textarea”]{
宽度：；
填充物：5px10px；
保证金：5px0；
框大小：边框框；
字体系列：arial；
字体大小：粗体；
边界：10px；
背景色：#F4F6FA；
颜色：深蓝色；
边框：4px实心#577CC1；
边界半径：4px；
}
textarea[type=“textarea”]：焦点{
边框：4px实心#e66026；
}
h1{
线高：1.25；
利润率：2米0；
}
p{
边缘：.5em0；
}
#切换器{
列表样式：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#切换李{
浮动：左；
宽度：30px；
高度：30px；
利润率：0 15px 15px 0；
边界半径：30px；
边框：3倍纯黑；
}
#黑按钮{
背景：灰色；
}
#橙色纽扣{
背景：#ec7c23；
}

HTML

按钮







按钮

javascript

<script>

document.getElementById('blackButton').onclick = switchBlack;
document.getElementById('orangeButton').onclick = switchOrange;


function switchBlack() {


var textareafocus = document.querySelectorAll('textareafocus')
for(var i = 0; i < body.length; i++) {
body[i].style.backgroundColor = "grey";
}

var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = 'white';
body[i].style.backgroundColor = "grey";
body[i].style.fontFamily = 'terminal';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'black';
formArea[i].style.borderColor = 'white';
formArea[i].style.color = 'white';
formArea[i].style.fontFamily = 'terminal';
var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "black";
}   
}
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = 'white';
buttonGroup[i].style.color = 'black';
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseover 
= function() {
this.style.backgroundColor = "orange";
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseout = 
function() {
this.style.backgroundColor = "white";
}
}



function switchOrange() {

var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = '#2C3E60';
body[i].style.backgroundColor = "#ec7c23";
body[i].style.fontFamily = 'arial';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'lightblue';
formArea[i].style.borderColor = '#577CC1';
formArea[i].style.color = 'darkblue';
formArea[i].style.fontFamily = 'arial';  
var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "orange";
}
}   
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = '#577CC1';
buttonGroup[i].style.color = 'white';
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseover 
= function() {
this.style.backgroundColor = "blue";
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseout = 
function() {
this.style.backgroundColor = "white";
}
}
</script> 

document.getElementById（'blackButton'）。onclick=switchBlack；
document.getElementById（'orangeButton'）。onclick=switchOrange；
函数switchBlack（）{
var textareafocus=document.querySelectorAll（'textareafocus'）
对于（变量i=0；i

我甚至试着玩querySelectorAll，但那似乎根本不起作用

如果有人知道怎么做，那就太酷了。请，只使用javascript，不使用JQuery。

检查此处更新的url 或者只是加上

 document.getElementById('orangeButton').onmouseover = switchOrange;
 document.getElementById('blackButton').onmouseover = switchBlack;

将在鼠标悬停在document.getElementById（“blackButton”）.onmouseover=switchBlack；

document.getElementById("blackButton").onmouseover = switchBlack;
document.getElementById("orangeButton").onmouseover = switchOrange;

function switchBlack() {
var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = 'white';
body[i].style.backgroundColor = "grey";
body[i].style.fontFamily = 'terminal';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'black';
formArea[i].style.borderColor = 'white';
formArea[i].style.color = 'white';
formArea[i].style.fontFamily = 'terminal';
}  
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = 'white';
buttonGroup[i].style.color = 'black';
}
}

function switchOrange() {
var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = '#2C3E60';
body[i].style.backgroundColor = "#ec7c23";
body[i].style.fontFamily = 'arial';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'lightblue';
formArea[i].style.borderColor = '#577CC1';
formArea[i].style.color = 'darkblue';
formArea[i].style.fontFamily = 'arial';  
}   
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = '#577CC1';
buttonGroup[i].style.color = 'white';
}
}

document.getElementById（“orangeButton”）.onmouseover=switchOrange； 函数switchBlack（）{ var body=document.getElementsByTagName（'body'）） 对于（变量i=0；idocument.getElementById("blackButton").onmouseover = switchBlack; document.getElementById("orangeButton").onmouseover = switchOrange; function switchBlack() { var body = document.getElementsByTagName('body') for(var i = 0; i < body.length; i++) { body[i].style.color = 'white'; body[i].style.backgroundColor = "grey"; body[i].style.fontFamily = 'terminal'; } var formArea = document.getElementsByClassName('formArea') for(var i = 0; i < formArea.length; i++) { formArea[i].style.backgroundColor = 'black'; formArea[i].style.borderColor = 'white'; formArea[i].style.color = 'white'; formArea[i].style.fontFamily = 'terminal'; } var buttonGroup = document.getElementsByClassName('buttonGroup') for(var i = 0; i < buttonGroup.length; i++) { buttonGroup[i].style.backgroundColor = 'white'; buttonGroup[i].style.color = 'black'; } } function switchOrange() { var body = document.getElementsByTagName('body') for(var i = 0; i < body.length; i++) { body[i].style.color = '#2C3E60'; body[i].style.backgroundColor = "#ec7c23"; body[i].style.fontFamily = 'arial'; } var formArea = document.getElementsByClassName('formArea') for(var i = 0; i < formArea.length; i++) { formArea[i].style.backgroundColor = 'lightblue'; formArea[i].style.borderColor = '#577CC1'; formArea[i].style.color = 'darkblue'; formArea[i].style.fontFamily = 'arial'; } var buttonGroup = document.getElementsByClassName('buttonGroup') for(var i = 0; i < buttonGroup.length; i++) { buttonGroup[i].style.backgroundColor = '#577CC1'; buttonGroup[i].style.color = 'white'; } }

var styleTag=document.createElement('style');
if (styleTag.styleSheet)
styleTag.styleSheet.cssText=styles;
else 
styleTag.appendChild(document.createTextNode(styles));

document.getElementsByTagName('head')[0].appendChild(styleTag);