javascript：鼠标悬停用于背景着色和不透明度

Question

从昨天开始，我开始 javascript 制作适用于页面主体的悬停效果（我想在悬停 div 时更改页面主体的背景颜色） ,

我看过一些教程，我自己尝试过，但我最终失败了，我想知道如何用 javascript 创造这种效果，我使用了类似的东西。

function mouseOver() {
  document.getElementsByClassName("body").style.backgroundColor = "black"
}

function mouseOut() {
  document.getElementsByClassName("body").style.backgroundColor = "white"
}

.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("accueil.png") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: white/* rgb(0,85,170); */
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseover="mouseover()" onmouseout="mouseout()" class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
        <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>
  </div>


</body>

</html>

我不能使用 jQuery 否则我一开始就不会尝试问这个问题，我需要知道如何将 JS 文件中的悬停效果应用到我的 html 和 css 页

-编辑-

有人教我如何使用鼠标悬停和背景着色，但我想问另一件事，它是关于不透明度的，我想把不透明度放在另一个 divs 我决定这样做在 document.lycee.style.opacity = "0.1"; 和 document.formations.style.opacity = "0.1"; 之前教过我同样的事情，但它实际上不起作用，至于 document.body.style.opacity = "0.1"; ，它改变了整个页面的不透明度。你能帮我最后一次吗？

Answer 1

确保您的 Javascript 代码在内容之后加载，并将 onmouseOver 替换为 onmouseover。

而不是 document.getElementsByClassName("body").style.backgroundColor = "black" 你可以这样做 document.body.style.backgroundColor = 'red';

如果你想和 DIV 一起玩

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
  divs[i].style.opacity = "0.8";
}

如果您只想更改具有 className 的特定元素的样式

var divs = document.getElementsByClassName('classNameHere');
for(var i=0; i < divs.length; i++) {
  divs[i].style.opacity = "0.8";
}

已编辑！

Answer 2

Body 不是 class 所以这个语句是行不通的，document.getElementsByClassName("body").style.backgroundColor = "black"

到Select正文你可以使用document.body或document.getElementsByTagName('body')[0];

function mouseOver() {
  document.body.style.backgroundColor = "black"
}

function mouseOut() {
  document.body.style.backgroundColor = "white"
}

.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("accueil.png") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: white/* rgb(0,85,170); */
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseOver="mouseOver()" onmouseout="mouseOut()" class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
        <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>
  </div>


</body>

</html>

Answer 3

是这样的吗？

function mouseOver() {
  document.body.style.backgroundColor = "black"
}

function mouseOut() {
  document.body.style.backgroundColor = "white"
}

.college{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("accueil.png") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: white/* rgb(0,85,170); */
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseover="mouseOver();" onmouseout="mouseOut();" class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
        <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>
  </div>


</body>

</html>

Answer 4

您正在尝试使用正在寻找 class 的 getElementsByClassName 获取标签，因此请使用下面代码段中的 getElementsByTagName 或将 class="body" 添加到正文标签

function mouseOver() {
  document.getElementsByTagName("body")[0].style.backgroundColor = "#000";
}

function mouseOut() {
  document.getElementsByTagName("body")[0].style.backgroundColor = "white";
}

.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}
.college{
border:1px solid black;
height: 50px;
width:50px;
}
.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("accueil.png") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: white/* rgb(0,85,170); */
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseOver="mouseOver()" onmouseout="mouseOut()" class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
        <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>
  </div>


</body>

</html>

Answer 5

一切顺利！但是大小写字母的小错误

1)

please see your function name carefully 
<div onmouseover="mouseover()" onmouseout="mouseout()" class="college">

'O' should be capital as you defined it mouseOver() and mouseOut();

2)

for using byName you must have tag with that name so for using 
document.getElementsByClassName("body").style.backgroundColor = "black";
add name="body" in <body>  
for example <body name="body">

或

  simply use byTagName atribute like this
document.getElementsByTagName("body")[0].style.backgroundColor = "black";

快乐编码，:-)

javascript：鼠标悬停用于背景着色和不透明度

javascript: mouse hover for background coloring and opacity

html

javascript

css

mousehover