make 1 id visible when hovering another one

Question

I am looking for a way to make this work:

when I hover on one link or image, the corresponding paragraph should become visible

for instance: hover on #imgHover1 makes #basishover1 visible

<table>
<tr>
<td><a href="link"><img src="image"id="imgHover1"></a></td>
<td><a href="link"><img src="image"id="imgHover2"></a></td>
<td><a href="link"><img src="image"id="imgHover3"></a></td>
<td><a href="link"><img src="image"id="imgHover4"></a></td>
<td><a href="link"><img src="image"id="imgHover5"></a></td>
</tr>
<tr>
<td><p id="basishover1">Basis</p></td>
<td><p id="basishover2">Basis</p></td>
<td><p id="basishover3">Basis</p></td>
<td><p id="basishover4">Basis</p></td>
<td><p id="basishover5">Basis</p></td>
<tr>

this is my current css but it doesn't work

#basishover1 {
visibility: hidden;
}
#imgHover1:hover  #basishover1{
visibility: visible;
}

css selectors only allow for selection of child or sibling elements in the current spec. If you want to keep your html as you have it you will need to use JS to handle the hover event — haxxxton, Aug 07 '14 at 01:24
What do you suggest that I change in my html to make it viable? — Sibeal, Aug 07 '14 at 01:31

pqnet · Answer 1 · 2014-08-07T14:27:58.540

1

edit: updated example to use sibling selectors

the rule you wrote:

#imgHover1:hover  #basishover1{
    visibility: visible;
}

applies an object whose id is #basishover1, inside of another object whose id is #imgHover1 and whose pseudoclass is hover. You don't have such an object in your DOM, no matter where you hover with your mouse, thus this rule is not going to match anything.

If you want it to work with just CSS you have to have the paragraph inside the same container as the object you are hovering, in this case maybe something like this:

<table>
<tr>
<td><a href="link" id="linkHover1"><img src="image"id="imgHover1"></a>
    <p id="basishover1">Basis</p></td>
<td><a href="link" id="linkHover2"><img src="image"id="imgHover2"></a>
    <p id="basishover2">Basis</p></td>
</tr>
</table>

with this CSS:

#basishover1 {
visibility: hidden;
}
#linkHover1:hover ~ #basishover1{
visibility: visible;
}

you may need to manually correct box positions and sizes to obtain the desired effect.

If you want to keep the original DOM structure you have to use little javascript. This has the additional advantage, by using some framework, you can animate transitions.

edited Aug 07 '14 at 14:27

answered Aug 07 '14 at 01:36

pqnet

6,070
1
30
51

this is the right idea for a pure css solution, i would only add that you could select a sibling so moving the
inside of the link is not necessary
– aw04 Aug 07 '14 at 01:43
thank you for the help, I now realize that the suggestion to use JS is better than my original approach and i will create the hovering-effect with JS – Sibeal Aug 07 '14 at 02:04
@aw04 what do you mean with that? Could you put an example in an answer as well? I would be interested in seeing it. – pqnet Aug 07 '14 at 10:03
@pqnet i'll add an answer when i have time, check out sibling selectors though to see how you could have the
before or after the tag http://stackoverflow.com/questions/16695556/what-is-the-logic-behind-sibling-selectors-and
– aw04 Aug 07 '14 at 12:12
1

@aw04 Very interesting, and they are supported in CSS2 too. How could I be oblivious of such feature for so long? – pqnet Aug 07 '14 at 13:23
@pqnet yeah it's something you rarely see, i suppose most of us are in the habit of using js for this kind of thing. this seems like a good use case for it though – aw04 Aug 07 '14 at 13:29

make 1 id visible when hovering another one

1 Answers1