/    Sign up×
Community /Pin to ProfileBookmark

change box color on hover

Copy linkTweet thisAlerts:
Feb 25.2010

Hi

How can we change box color on hover like yahoo.com

[url]http://www.yahoo.com/[/url]

see in Today news. box color will change on hover.

any idea??

thank you

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@letmehaveagoFeb 25.2010 — this should be posted in the css forum or javascript forum.

a css solution would look something like this...
[CODE]
.box:hover {
background: red;
}
[/CODE]

a javascript solution would look something like this...
[CODE]
<div onmouseover="this.style.background = 'yellow'">
This is a box
</div>
[/CODE]
Copy linkTweet thisAlerts:
@olanexhariauthorFeb 25.2010 — Thank you Friend,

It worked like a charm...

here is a link for my example page...

http://reedhee.com/exp%20files/box%20color.html

In this page on mouse over yellow color appears.

Now I want to show Original color when mouse is moved away from the box.

Or

different color(other then yellow) when mouse is moved away from the box...

Please help me in this case. I am not very good at javascript..

Thanks...
Copy linkTweet thisAlerts:
@ryanbutlerFeb 25.2010 — [CODE].box a {
background: red;
}[/CODE]

Or:

[CODE]<div onmouseover="this.style.background = 'yellow'" onmouseout="this.style.background='blue'>
This is a box
</div>[/CODE]

Personally, you're better off using the former as JS shouldn't be used for this purpose.
Copy linkTweet thisAlerts:
@letmehaveagoFeb 26.2010 — Yes, i concur.

Javascript should only be used for more complicated things.
Copy linkTweet thisAlerts:
@olanexhariauthorFeb 26.2010 — Thanks to both of you,

I really appreciate your help,

well I am beginner in java script. So I would like to go with your suggestions. Is there any alternative method to create this effect??

Please let me know..

Here I created this page out of this javascript

http://www.reedhee.com/hindi&#37;20movies/movies/qayamat%20se%20qaymat%20tak/veoh%20pt-1/index.html

Thanks...
×

Success!

Help @olanexhari 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.20,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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