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-

My Personal Notes

Recommended Posts:

Naman_Garg

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.