Changing the table Bg color on hover?

Posted on 2011-05-01
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

    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


    Thank you

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    761 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

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now