I have a nice touchscreen button that responds to the user's touch (looks like iOS button), the JavaScript works fine inside the html document, but will not work at all in an external file:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Custom buttons</title>
<link rel="stylesheet" href="buttons.css" type="text/css" />
<script src="main.js" type="text/javascript"></script>
</head>
<body ontouchstart=''>
<div class="round-button iOS-border">
<div class="round"></div>
</div>
</body>
</html>
CSS:
.round-button{
max-width: 50px;
max-height: 30px;
background-color: #fefefe;
padding: 0px 3px 1px 0px;
border-radius: 1000px;
transition:.3s;
-webkit-transition:.3s;
}
.round-button .round {
position: relative;
width: 30px;
height: 30px;
border-radius: 100%;
background-color: white;
box-shadow: 0px 2px 5px #c1c1c1;
border: .5px solid #d7d7d7;
transition:.3s;
-webkit-transition:.3s;
}
.round-button:hover .round {
left: 22px;
}
JS:
iButtonOn = '#4cda62';
iButtonOff = '#fefefe';
iButtonBorder = '1px solid #e1e1e1';
document.querySelector('.round-button').ontouchstart = function() {
var round = document.querySelector('.round-button');
document.querySelector('.round').style.left = '21px';
round.style.background = iButtonOn;
round.style.border = '1px solid transparent';
}
document.querySelector('.round-button').ontouchmove = function() {
var round = document.querySelector('.round-button');
document.querySelector('.round').style.left = '0px';
round.style.background = iButtonOff;
round.style.border = iButtonBorder;
}
// Default styles
document.body.onload = function() {
var round = document.querySelector('.round-button');
round.style.border = iButtonBorder; // loads default style
}
I tried putting var before iButtonOn, iButtonOff,iButtonBorder, and then putting it in a seperate function that starts on body load (like <body onload="function()">) but that still doesn't work.
The output looks like this, when the javascript is inside the document:
Outside Document:
Your script is being executed before the page loads. Move it to the end or wrap it in a window.onload handler function.
Related
I have a problem with my div when I write in the text area and hit save nothing is show up. I have a problem with my div when I write in the text area and hit save nothing is show up
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input() {
var name = document.getElementById("text").Value
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
color: black;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input()" id=" b " type="button "> save</button>
<div id="output"></div>
</body>
Try this. There were a few issues with this code. I added comments to the changes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input(event) {
//added preventDefault() to keep the page from reloading
event.preventDefault();
//changed Value to value - watch your case
var name = document.getElementById("text").value;
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
/*changed the text color from black to white so you can see when the output is added*/
color: white;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input(event)" id="b" type="button"> save</button>
<div id="output"></div>
</form>
</body>
</html>
Cheers!
Your output element has both a black background, and black text, so you won't see anything change.
You were missing a </form> tag.
It looks like you're trying to create a list of tasks, and each time you add a new task, and click "save" it adds a new task under the proceeding ones.
Here's an updated example that uses more modern JS methods that you might find useful. Links to the relevant documentation are at the bottom of the post.
// First we cache all our elements
const task = document.querySelector('textarea');
const list = document.querySelector('ul');
const button = document.querySelector('button');
// Instead of inline JS we add an event listener to
// the cached button element.
button.addEventListener('click', handleClick, false);
// `focus` the cursor in the textarea
task.focus();
function handleClick() {
// We create a new list item
const item = `<li>${task.value}</li>`;
// We add that to the list
list.insertAdjacentHTML('beforeend', item);
// Reset the textarea value
task.value = '';
// And refocus on it so we don't have to
// manually click in it to write a new task
task.focus();
}
button { background-color: red; color: white; }
<form>
<h3>Add your tasks</h3>
<textarea></textarea>
<button type="button">Save task</button>
</form>
<ul></ul>
Addition documentation
querySelector
Template/string literals
insertAdjacentHTML
addEventListener
There are couple problem:
You didn't close the form tag in HTML
you write the first letter of value as capital in input function
And you may did not look but your button background color is not coming that is because there is spaces inside the id in HTML just remove those and you're good to go.
And make a paragraph inside the output div and give him the id of output and than stor that into a variable and do o.innerText o is you output paragraph = i.value i is your input
I have added some features to to your application if you want to copy it i do not mined -
// ES6 Syntax
const render = () =>{
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
// ES5-- Syntax
function renderES(){
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
#import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root{
--primary-color: rgb(26, 26, 26);
--secondary-color: white;
--font-family: Nunito, sans-serif;
--box-shadow: rgb(0 0 0) 1px 1px 3px 0px inset, rgb(48 48 48 / 50%) -1px -1px 3px 1px inset;;
--all-transition:transform ease-in-out 0.3s 0s;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: var(--font-family);
}
.main-content{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
border-radius: 10px;
box-shadow: var(--box-shadow);
width: 85%;
height: 270px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary-color);
flex-direction: column;
}
.container>h1{
margin-top: 15px;
color: var(--secondary-color);
text-transform: uppercase;
}
form{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 5px;
width: 100%;
height: 75%;
}
form>textarea{
width: 95%;
height: 30%;
background-color: var(--primary-color);
border: none;
border-radius: 10px;
box-shadow: var(--box-shadow);
padding: 15px;
color: var(--secondary-color);
}
#output{
width: 95%;
height: 40%;
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
color: var(--secondary-color);
padding: 10px;
}
form>button{
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
width: 95%;
height: 30px;
border-radius: 10px;
border: none;
font-weight: bold;
margin-bottom: 10px;
color:var(--secondary-color);
transition: var(--all-transition);
cursor: pointer;
}
/* NTH CHILD */
form>textarea::placeholder{
color: var(--secondary-color);
}
/* Animations */
form>button:hover{
transform: scale(1.02)
}
form>button:active{
border: 1px solid var(--secondary-color);
}
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="main-content">
<div class="container">
<h1> Add your tasks </h1>
<form>
<textarea id="text" placeholder="Enter you task here.."></textarea>
<div id="output">
<p id="output-text"></p>
</div>
<button
type="button"
id="addtask-btn"
onclick="render()">
Save
</button>
<form>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
It seems that you haven't ended the
<form>
tag
I'm trying to change some styling properties based on the div ID that I've been able to capture in a javascript function.
When the user selects a div, the javascript captures its ID. When they select the red button, whichever div is selected, it's background colour should be changed to red.
I've tried multiple ways and none of the approaches I've taken so far work.
Any ideas? Would greatly appreciate any and all suggestions!
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
sid.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this.id)"></div>
<div id="colorPreview2" onclick="reply_click(this.id)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
You are close, but you have a few issues with your code. First of all, you need the element itself in order to change its properties; not its ID. this.id should be changed to simply this. And secondly, you need to change sid.setProperty() to sid.style.setProperty().
Here's your code with the above fixes:
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
sid.style.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this)"></div>
<div id="colorPreview2" onclick="reply_click(this)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
sid is an id, it's just a string, not a function so you can't call sid.now it's id of element and we can find the element with document.getElementById(). and also it's a good practice to check is any div selected or not.
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
//sid.setProperty("background-color", "#ff4f4f");
var doc = document.getElementById(sid)
if(doc){
doc.style.backgroundColor ="#ff4f4f"
}
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this.id)"></div>
<div id="colorPreview2" onclick="reply_click(this.id)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
Here's working code. You can't use the id of an element to change the element. You need to get the element with the Id. So use this instead of this.id.
var selectedElem;
function reply_click(clickedElem) {
selectedElem = clickedElem;
console.log("Got ID!" + selectedElem.id);
}
function btnRed() {
console.log("Changed color for " + selectedElem.id);
selectedElem.style.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this)"></div>
<div id="colorPreview2" onclick="reply_click(this)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
I'm learning javascript and I've faced with a strange case while doing the gallery example in the MDN. I decided to add a simple function to this example but it didn't work. My goal is to add a function to the ".displayed-img" img.
I know that the issue is because of the "overlay" div. and I can run my function when I comment that line in the HTML. But I wonder what would be the best approach when I have a case like this and I need to access to an object which sits beneath another one. Thanks.
Here is my code:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
var imgUrl, currentImgUrl;
/* Looping through images */
for (var i = 0; i < 5; i++) {
imgUrl = 'https://via.placeholder.com/640x48'+(i+1)+'.jpg';
var newImage = document.createElement('img');
newImage.setAttribute('src', imgUrl);
thumbBar.appendChild(newImage);
newImage.addEventListener ('click', function(e){
displayedImage.setAttribute('src', e.target.getAttribute('src'));
} );
}
displayedImage.addEventListener('click', sayHi);
function sayHi(){
console.log('hi');
}
btn.onclick = function() {
if (btn.getAttribute('class')==='dark') {
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
btn.textContent = 'Light';
btn.setAttribute('class', 'light');
} else {
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
btn.textContent = 'Darken';
btn.setAttribute('class', 'dark');
}
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0, 0, 0, 0);
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="https://via.placeholder.com/640x480">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="main.js"></script>
</body>
</html>
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
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;
}
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/
You're confusing two different paradigms of hooking events. onmouseover is a property you can assign a single function to, via assignment (not calling it). So you could do:
Button.onmouseover = function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
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>
But the modern way is to play nicely with others and not bludgeon any previous handler (which the above does), but just add to the handler list:
Button.addEventListener("mouseover", function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
}, false);
var Button = document.getElementById('Button');
Button.addEventListener("mouseover", function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
}, false);
#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>
Of course, IE8 and earlier make that difficult, but you can use the function in this other answer if you need to support them.