color on a div tag 100points, simple

Posted on 2004-11-19
Medium Priority
Last Modified: 2011-08-18
I have a simple div tag that makes a black square on the screen... How would I make it so that when I mouse over it changes to a different color
Question by:puotta

Author Comment

ID: 12631946
<div style="position: absolute; left: 100px; top: 30px; width: 45px; height: 45px; background-color: rgb(0, 0, 0);"></div>

Accepted Solution

eyeh8u earned 400 total points
ID: 12632518
<div style="background-color: black" onmouseover="this.style.backgroundColor= 'red'">


<div style="position: absolute; left: 100px; top: 30px; width: 45px; height: 45px; background-color: rgb(0, 0, 0);" onmouseover="this.style.backgroundColor = rgb(255,255,255)"></div>

To change it back, use onmouseout
LVL 49

Expert Comment

ID: 12633085
When you are planning to do more that just the backgroundcolor it could be wise just to use classed. This keeps things orderly also, and shortens the javascript onmouse.. in your html:

<style type="text/css">
.divNormal {background-color:black;}
.divHover   {background-color:red;}

<div class="divNormal" onmouseover="this.className='divHover';" onmouseout="this.className='divNormal';">


Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question