Od wczoraj zacząłem JavaScript, aby uczynić efekt unoszący, który dotyczy ciała strony (chcę zmienić kolor tła korpusu strony podczas unoszenia div),

Obserwowałem kilka samouczków i próbowałem tego sam, ale skończyło się na upadnieniu, chciałbym wiedzieć, jak można utworzyć ten efekt z JavaScript, użyłem czegoś takiego.

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>

Nie mogę używać jquery Ortherwise, nie próbowałem zadać tego pytania w pierwszej kolejności, muszę wiedzieć, jak mogę zastosować efekt Hover w pliku JS na moją stronę HTML i CSS

-edytować-

Nauczyłem się, jak mogę użyć myszy unoszącą się i kolorowanki tła, ale chciałbym zapytać inną rzecz, chodzi o nieprzezroczystość, chcę umieścić krycie nad Orthera Divs, postanowiłem zrobić to samo w tym samym, co byłem wcześniej nauczany document.lycee.style.opacity = "0.1"; i document.formations.style.opacity = "0.1";, ale faktycznie nie działa, jak w przypadku document.body.style.opacity = "0.1"; zmienia krycie na całej stronie. Czy możesz pomóc Mee na ostatni raz?

2
souzouker 27 czerwiec 2017, 12:38

5 odpowiedzi

Najlepsza odpowiedź

Upewnij się, że twój kod javascript ładuje się po zawartości i wymienić onmouseOver za pomocą onmouseover.

Zamiast document.getElementsByClassName("body").style.backgroundColor = "black" możesz to zrobić document.body.style.backgroundColor = 'red';

Jeśli chcesz grać z th Div

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

Jeśli chcesz zmienić style tylko określonego elementu z nazwą klasy

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

Edytowany!

2
Yordan Nikolov 27 czerwiec 2017, 10:06

Próbujesz uzyskać znacznik za pomocą getElementsByClassName, który szuka klasy, więc użyj getElementsByTagName jak w fragmence poniżej lub dodaj class="body" do tagu ciała

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>
0
Ram Segev 27 czerwiec 2017, 09:55

Dobrze idzie! ale mały błąd wielkich i małych liter

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">

Lub

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

Szczęśliwe kodowanie, :-)

1
Pratik Thube 27 czerwiec 2017, 10:48

Coś takiego?

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>
1
kevin b. 27 czerwiec 2017, 09:54

Ciało nie jest klasą, więc to oświadczenie nie będzie działać, document.getElementsByClassName("body").style.backgroundColor = "black"

Aby wybrać ciało, którego możesz użyć document.body lub 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>
2
Tushar Vaghela 27 czerwiec 2017, 09:48