Skip to content

Instantly share code, notes, and snippets.

@joelibaceta

joelibaceta/estilos.css

Created February 21, 2022 23:03
Show Gist options
  • Save joelibaceta/619db16c05c2f9de9f0274167c327c73 to your computer and use it in GitHub Desktop.
Save joelibaceta/619db16c05c2f9de9f0274167c327c73 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
estilos.css
#colour_container {
width: 150px;
height: 150px;
background-color: black;
}
.color-option {
width: 50px;
height: 50px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
.color-selectors {
display: flex;
}
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<div id="colour_container">
</div>
<div class="color-selector">
<div id="red" onmousemove="redSelected()" onmouseout="cleanColors()" class="color-option"></div>
<div id="blue" onmousemove="redSelected()" class="color-option"></div>
<div id="green" class="color-option"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
function redSelected() {
var mainColourE = document.getElementById("colour_container")
mainColourE.style.backgroundColor = "red"
}
function cleanColors(){
var mainColourE = document.getElementById("colour_container")
mainColourE.style.backgroundColor = "black;"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment