Remote linking issue // Rookie q?

[HHispañola]

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.

[Senff]

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;
}

[HHispañola]

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.

[Author]

Posts