Change the Background Color with onMouseover (HTML)

vegaseat 0 3K Views

Use onMouseover to change the background color of your webpage. Can be applied to change other things like images and so on.

<!-- Experiments with the mouse  vegaseat  6/15/02 -->
<!-- onMouseover, href, bgcolor -->

<html>
<head>

	<title>change the background color with onMouseover</title>
	
</head>
<body>

Move the cursor to the color you want ...
<br>
<br>
<a href="" onMouseover="document.bgColor='red'">Red</a>
<br>
<a href="" onMouseover="document.bgColor='orange'">Orange</a>
<br> 
<a href="" onMouseover="document.bgColor='yellow'">Yellow</a>
<br> 
<a href="" onMouseover="document.bgColor='green'">Green</a>
<br> 
<a href="" onMouseover="document.bgColor='magenta'">Magenta</a>
<br> 
<a href="" onMouseover="document.bgColor='purple'">Purple</a>
<br> 

</body>
</html>

Dani AI

Generated

’s inline onmouseover trick worked back in the day, but if it “doesn’t work” as / noted, the usual culprits are: the browser following a placeholder link (so the page reloads), a conflicting CSS rule, or reliance on the legacy bgColor property. Today, prefer CSS for simple hovers and unobtrusive JS for anything dynamic. Also, keep attribute names lowercase in HTML (onmouseover), and use a real button when there is no navigation target instead of href="#", as suggested.

To do this from an external CSS file (answering ): add a hover rule to your stylesheet and link it once from the page. Use background-color (not background) so you don’t accidentally wipe out any background image.

<link rel="stylesheet" href="/css/site.css">
/* site.css */
@media (hover: hover) {
  body:hover { background-color: #f6fff2; transition: background-color .2s ease; }
  .nav-item:hover { background-color: #00b008; color: #fff; }
}

If you need script-driven control (e.g., hover a specific element to recolor the whole page), avoid bgColor and set styles or toggle a class with event listeners:

document.addEventListener('DOMContentLoaded', () => {
  const trigger = document.querySelector('.nav-item');
  if (!trigger) return;
  trigger.addEventListener('mouseenter', () => document.body.classList.add('page-hover'));
  trigger.addEventListener('mouseleave', () => document.body.classList.remove('page-hover'));
});
body.page-hover { background-color: #00b008; }

Notes:

  • On touch devices, :hover may never fire. Pair hover with a click/tap fallback if the effect matters.
  • If something still refuses to change, check for a more specific CSS rule (including any !important) that overrides your style.
Member Avatar for parthireach
parthireach 0 Unverified User

:rolleyes: hai

Member Avatar for prathapvs
prathapvs 0 Newbie Poster

i think its not working

Member Avatar for anilexi
anilexi 0 Newbie Poster

;) ;) Boring 100% Nothing Work It. Like U

Member Avatar for remotions
remotions 0 Newbie Poster

It works, just you need to fill the href="" with # so that it looks like this: href="#". Or you will have mouse click to point your browser to the start page of your site. Also you have to disable CSS background styles for particular page.

Member Avatar for lizzeelike
lizzeelike 0 Newbie Poster

is it possible to do this same work using outside"CSS" file?plz do reply
thanks
lizzeelike

Member Avatar for warest
warest 0 Newbie Poster

NO

Member Avatar for pankaj dadhich
pankaj dadhich 0 Newbie Poster

how can use anchor teg in html . what's type of anchor teg?

Member Avatar for mikrosfoititis
mikrosfoititis 0 Junior Poster in Training

You can do that by using CSS. Supposind you want to change the background colour of class MenuOption object:

.MenuOption:hover {
   background-color: grey;
}
Member Avatar for safvansouri
safvansouri 0 Newbie Poster

so i got a code like onMouseOver="this.bgColor=&#39;#fb2b27&#39;" how do i change it in to green color

Member Avatar for TonyG_cyprus
TonyG_cyprus 36 Newbie Poster

First of all, this thread is over 6 years old, so you are lucky to get a reply, read the rules.
Search before asking.
You are obviously very new to this if you didn't know &#39; is the ANSI code for ' and the #FB2B27is a red, #00B008 will be a green so the code is "this.bgColor=&#39;#00B008&#39;"and this will give you a green. Or you can write it "this.bgColor='#00B008'"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview