Add listener events of javascript.
HTML FILES.
addEventListener
CSS FILES.
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial;
}
div#wrapper{
margin: 25px auto 0px auto;
width: 75%;
}
div#wrapper h1{
display: block;
background-color: #203d3a;
color: #fff;
text-align: center;
line-height: 75%;
border-radius: 20px 20px 0px 0px;}
d35iV#contex1, div#contex2{
float: left;
width: 100%;
margin-top: 25px;
}
div#wrapper img{
width: 100%;
cursor: pointer;
border-radius: 0px 0px 20px 20px;
height: 50%;
filter: grayscale(100%);
}
/* div#wrapper img:hover{
filter: grayscale(0%);
} */
Javascript Files.
// document.getElementById('img1').onmouseover= abc;
// function abc() {document.getElementById('img1').style.filter='grayscale(0%)';}
// document.getElementById('img1').onmouseout= cyz;
// function cyz() {document.getElementById('img1').style.filter='grayscale(100%)';}
document.getElementById('img1').addEventListener("mouseover",function () {this.style.filter='grayscale(0%)';
});
document.getElementById('img1').addEventListener("mouseout",function () {this.style.filter='grayscale(100%)';});
document.getElementById('img2').addEventListener("mouseover",function () {this.style.filter='grayscale(0%)';
});
document.getElementById('img2').addEventListener("mouseout",function () {this.style.filter='grayscale(100%)';});
Love Nature
Beautiful Nature
Comments
Post a Comment