Changing the table Bg color on hover?

Posted on 2011-05-01
Medium Priority
Last Modified: 2012-05-11
I would like to have 1 row with a few columns that contain links (link colors stay white), when a person hovers over each columns the background color changes (each columns will have a deferent color) and/or if I can the background image for each column can change. Can someone tell me how to do this?

Question by:overcolor
LVL 13

Accepted Solution

jonahzona earned 2000 total points
ID: 35502057
You need to use the hover event.

It would be easier to help if you posted some of your HTML here, but I will give you an example.

.sample {
  width 100px;
  height: 100px;
  background: #FFFFFF;

.sample:hover {
  width: 100px;
  height: 100px;
  background: #636363'

Open in new window


<div class="sample">

Open in new window

In this sample, the division "sample" is 100px wide and 100px tall with a white background. However, when the mouse goes over the division, the :hover selector will tell the division to turn grey.

If you post your HTML here, I can help you get an exact CSS markup for it.


Author Closing Comment

ID: 35502135

Thank you

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

864 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