昨日から、ページのボディに適用するホバリング効果を作るために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のortherwiseを使用することはできません、私は私の中にJSファイルにホバー効果を適用する方法を知っておく必要がありますHTMLとCSSのページ
-edit-
私は着色マウスホバリングや背景を使用することができますどのように教えられてきたが、私は別の事をお願いしたいと思い、それは不透明度についてですが、私は上の不透明度を入れたいですオーダーd ivs私はとdocument.formations.style.opacity = "0.1";
の前に私が教えられたことで同じことをすることにしましたが、実際には動作しません。document.body.style.opacity = "0.1";
のように、ページ全体の不透明度を変更します。あなたは最後にもう一度お願いしますか?
文書を使用してみてください.getElementsByTagName(body); classnameの代わりに。 –