asked on

Using javascript to make background darker on mouseover

Hi Everyone,

I'm trying to create a grid layout in CSS that consists of "boxes" with a width and height of 200px. Inside these boxes will be a small picture and a short description.When moused over, the background of the box changes from grey to light grey and when clicked on, it will go to another webpage. How do I do this with Javascript?

Thanks,
Max

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Maxwellb

ASKER

Hi,

Thanks for your quick response! I've used your suggestions to create a test page:

http://members.shaw.ca/max.b/

Almost everything is working great. The only problem is that if the text stops at a certain point within the box, so does the mouseover color change. Is there any way to solidify the height and width of the mouseover at 200px?

Thank You,
Max

b0lsc0tt

For that page I would move it (the background color and the onmouseover) to the table tag. That will still change but should fill the whole table.

bol

Maxwellb

ASKER

Hi b0lsc0tt,

I've updated that link on the previous post to your latest recommendations, but unfortunately, it only changes part of the box to the mouse over color (the opposite part of the table that it changed before).

Thanks,
Max

b0lsc0tt

OK, that is probably because the background color is not usually inherited in the table elements. I never remember exactly how that works but it makes sense. Of course make sure you don't specifiy a white background color somewhere in your code but if you don't put the style attribute below in the td tag (maybe the tr instead or also).

<td style="background-color: inherit;">

Let me know how that works or if you have a question.

bol