HTML | Change Background color using onmouseover property
In this post, the working of onmouseover event is shown by changing the colours of a paragraph by taking the mouse over a particular colour.
Syntax:
document.bgColor = 'nameOfColor'
HTML code that will change the colour of the background when the mouse is moved over a particular colour. Background colour property specifies the background colour of an element.
<html> <p> <!-- when mouse is move over the colour name, colour change --> <a onmouseover="document.bgColor='greem'">Bright Green</a><br> <a onmouseover="document.bgColor='red'">Red</a><br> <a onmouseover="document.bgColor='magenta'">Magenta</a><br> <a onmouseover="document.bgColor='purple'">Purple</a><br> <a onmouseover="document.bgColor='blue'">Blue</a><br> <a onmouseover="document.bgColor='yellow'">Yellow</a><br> <a onmouseover="document.bgColor='black'">Black</a><br> <a onmouseover="document.bgColor='orange'">Orange</a><br> </p></html> |
Output:
Initially, the background colour is white-
When the mouse is moved over the “Bright Green” color-
When the mouse is moved over the “Red” colour-
When the mouse is moved over the “magenta” colour-
When the mouse is moved over the “purple” colour-
When the mouse is moved over the “blue” colour-
When the mouse is moved over the “black” colour-
When the mouse is moved over the “orange” colour-
When the mouse is moved over “yellow” colour-
.png)
.png)