2017-06-27 2 views
2

昨日から、ページのボディに適用するホバリング効果を作るために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";のように、ページ全体の不透明度を変更します。あなたは最後にもう一度お願いしますか?

+0

文書を使用してみてください.getElementsByTagName(body); classnameの代わりに。 –

答えて

2

コンテンツの後にJavaScriptコードが読み込まれていることを確認して、onmouseOveronmouseoverに置き換えてください。

あなたがclassNameの

でのみ、特定の要素のスタイルを変更したい場合は番目の電子DIVの

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

でプレイしたい場合は、この document.body.style.backgroundColor = 'red';

を行うことができます

代わりの document.getElementsByClassName("body").style.backgroundColor = "black"

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

編集!

+0

コンテンツの後にjavascriptコードが読み込まれるかどうかはどのように分かりますか?私はちょうど ''を私のhtmlの最後に動かすべきですか? – souzouker

+0

これは別の方法として、 'document.addEnterpriseListener(" DOMContentLoaded "、function(){//コンテンツのロード後に何かを実行});' –

+0

'document.getElementsByClassName(" body.)。style.backgroundColor = "black" 'by document.body.style.backgroundColor = 'red';'そして、実際には、私はマウスが色の変更をホバーし、divの外にマウスを置いたときに変更されました私が選んだものの色。出来た!しかし私は何か他のことを尋ねるかもしれない今、私は 'document.body.style.opacity =" 0.1 "'を作ったので、orther divに不透明度を入れようとしましたが、ページ全体を10%にしていますので、 'document.getElementsByClass ( "lycee")。style.opacity = "0.1";しかし動作しないようです。 – souzouker

2

ボディは、あなたがこのようなdocument.bodyまたは

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>

1

document.getElementsByTagName('body')[0];何かを使用することができます

document.getElementsByClassName("body").style.backgroundColor = "black"は、ボディを選択するには、ので、この文は動作しませんクラスではないでしょうか?

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>

0

あなたがクラスを探しているgetElementsByClassNameを使用してタグを取得しようとしているので、いずれかの以下のスニペットのようgetElementsByTagNameを使用するか、bodyタグに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>

1

gおっと!しかし、大文字と小文字

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

幸せなコーディングの小さなミス、:-)

関連する問題