javascript: mouse hover for background coloring and opacity

since yesterday i started javascript to make a hovering effect that applys to the body of the page(i want to change the background color of the body of the page while hovering a div),

I've watched some tutorials and i tried it myself but i ended up failing, I would like to know how can create this effect with javascript , i used something like this.

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>

i cannot use jQuery ortherwise i wouldn't have tried to ask this question in the first place , i need to know how can i apply the hover effect in a JS file into my html and css page

-edit-

i've been taught how i can use mouse hovering and background coloring but i would like to ask another thing, it is about opacity, i want to put opacity on the orther divs i decided to do the same thing at what i was taught before document.lycee.style.opacity = "0.1"; and document.formations.style.opacity = "0.1"; but it actually don't work, as for document.body.style.opacity = "0.1"; , It changes the opacity on the whole page. can you help mee for one last time please?

Solution

Make sure that your Javascript code loads after the content and replace onmouseOver with onmouseover.

Instead of document.getElementsByClassName("body").style.backgroundColor = "black" you can do this document.body.style.backgroundColor = 'red';

if you want to play with th e DIV's

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

if you want to change the styles only of specific element with className

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

Edited!