Search code examples
javascripthtmlcssmouseeventonmouseover

CSS Style manipulation : Javascript not Working

i Was trying to make a simple button which changes colour on mouse over using JavaScript and its not working so,help please.... html:

<head lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Button.css" />
<script type="text/javascript" src="Button.js"></script>
<title>BUTTON</title>
</head>
<body>
<div id="Button">PRESS ME</div>
</body>

JavaScript:

var Button = document.getElementById('Button');
Button.onmouseover(function(){
this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
});

CSS:

#Button{
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0,0,255,0.3);
font-size : 25px;
}
Solution

  • Change

     Button.onmouseover(function(){
   this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
 });

    to

       Button.onmouseover = function(){
       this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
    };

    Full example:

    var Button = document.getElementById('Button');
Button.onmouseover = function () {
    this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
    #Button {
    width: 120px;
    height : 30px;
    position: fixed;
    top: 100px;
    left:300px;
    border: 1px solid black;
    background-color : rgba(0, 0, 255, 0.3);
    font-size : 25px;
}
    <div id="Button">PRESS ME</div>

    JSFiddle demo: http://jsfiddle.net/n4j53jcu/