CSS按钮悬停时更改正文背景颜色?

时间:2018-03-22 14:00:40

标签: javascript html css

对于我的网站,我有一个背景颜色的身体,例如

body {
background-color: #FFFFFF;
}

我还在.html文件中定义了一个按钮(假设它的ID为“button1”),我希望在按钮时更改正文的背景颜色(例如#000000;)当鼠标不在按钮上时,用鼠标盘旋并改回来。有没有办法做到这一点?

我是一名新的网络开发人员,我仍然在寻找/学习JavaScript。

2 个答案:

答案 0 :(得分:1)

它不可能在CSS中使用。在JavaScript中,它非常简单,您正在寻找onmouseover/out个事件。



var button = document.getElementById('hover');
var body = document.body;

button.onmouseover = function() {
	body.className = 'hovered';
}

button.onmouseout = function() {
	body.className = '';
}

body {background: #000;}
body.hovered {background: #ff0;}

<button id="hover">button</button>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

使用纯css,您可以添加background div:

#button:hover ~ #background {
  background-color: red;
}

#background {
  position:absolute;
  background-color: blue;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
}
<button id="button">Button</button>
<div id="background"></div>