Grow your CSS skills. Land your dream job.

Remote linking issue // Rookie q?

  • # April 3, 2013 at 4:50 pm

    Cheers. Out the gate, just want to say that I’m typing this right from class. 1 month into my CSS training and i’ve reached my 1st hurdle. I’ve read a post that came close to what I’m trying but I wanted to ask some pros for clarity.

    I’ve created a basic table and and I’ve added my CSS. What I’m trying to do is link a **td** so that during a **td:hover**, not only will my **td** change colour (which it does fine), but I’m also trying to change the opacity of a **p** inside the **footer**.

    I’m sure that’s possible, but it’s simply not clicking in my head.

    Essentially, I just want some text to go form **o** opacity to **1**, when the **td:hover** is happening. here are some parts of my code:

    td.holiday:hover {
    color: #f39;
    }

    footer {
    position:relative;
    opacity: 0.1; /* i have the opacity set @ .1 so I can see what’s happening */
    }

    footer p.nyd,
    {
    position:absolute;
    left:0px;
    top:0px;
    }

    Everything is working on their own, but I can’t connect that td:hover and opacity like I want.

    Many thanks ahead of time for the help, and look fwd to learning more, sharpening my coding. This place has been a wonderful resource.

    # April 3, 2013 at 5:02 pm

    You can’t really change the opacity (or anything else) of an element when you hover over a completely different element. At least not with CSS — you’d have to use some jQuery for that.

    Changing the opacity of an element when you hover over the element itself, or a parent of the element, is no problem on the other hand. So for the P inside the TD, it would be something like this:

    td p {
    opacity:0;
    }

    td:hover p {
    opacity:1;
    }

    # April 3, 2013 at 5:20 pm

    DOH. Many thanks for that **Senff**. So, you’re suggesting that I maybe move the content inside my **td** and go from there?? Hmmm.

    Is there some simple jQuery I could use to make my original idea work?? Either way, I’ll make that change and see if I like the result.

    Thx again for your time.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".