Related Articles

Related Articles

HTML | Change Background color using onmouseover property
  • Difficulty Level : Medium
  • Last Updated : 31 Jul, 2018

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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-

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :