/    Sign up×
Community /Pin to ProfileBookmark

How to change button background with onmouseover??

Copy linkTweet thisAlerts:
May 29.2006

Hi, I am having a hard time finding how to change the background color of a button using onmouseover.

I already have my button class and input “type=button” all set up. Thank you very much!

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMay 29.2006 — <input type="button" value="Hover"

onmouseover="this.style.backgroundColor='red';return true;"

onmouseout="this.style.backgroundColor='bisque';return true;">
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — Fantastic! Thanks. Two other questions please? Any way to apply #990000 type colors to this instead? My tests aren't accepting it. And can I apply a text color to this as well? When I add "this.style.color='red'; etc. along with the background command by seperating it by a semi colon, it is not accepted. I would like to be able to change the text color along with the background color.

Thank you so much go tired of looking for the answer to that one.
Copy linkTweet thisAlerts:
@narkyMay 29.2006 — <input type="button" value="Hover"

onmouseover="this.style.backgroundColor='#000000';this.style.color='#FFFFFF';return true;">
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — Thanks, those aren't working though for some reason.
Copy linkTweet thisAlerts:
@narkyMay 29.2006 — what browser are you on... works fine for me
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — lol, sorry. Strange, tested it since your last message with no luck but just now I am starting to get something. Still having trouble with the text changing on hover so will let you know. Thanks for the follow up. Thanks for the changes, needed those hex codes instead of the straight color names.
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — This is where I am having difficulty. Getting the text to turn black on the onmouseover.

onmouseover="this.style.backgroundColor='#EF0000';this.style.color='#000000;'"

onmouseout="this.style.backgroundColor='#D00000';this.style.color='#FF9B9B;';return true;"

I tried it with and without the turn true on the onmouseover with no luck. Funny though it does it fine in the web page editors, just not through Netscape and Internet Explorer. Any ideas? Thanks.
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — I think I found an idea, going to try to create a seperate class for it. Man this css is cool, glad someone thought of it.
Copy linkTweet thisAlerts:
@phpnoviceMay 29.2006 — There should be no semicolon inside the single quotes:

this.style.color='#FF9B9B[COLOR=Red][B];[/B][/COLOR]';
Copy linkTweet thisAlerts:
@RiannaauthorMay 29.2006 — Thank you very much that fixed it! Came real close to redoing everything. Man, you get one little thing off and things just don't work.
Copy linkTweet thisAlerts:
@phpnoviceMay 29.2006 — You're welcome.

Cheers.
×

Success!

Help @Rianna spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...