Changing color of span element on img hover using only css

Question

I know this is stupid and bad question but i can't find way to resolve my problem.

It is very simple but i am confused.I want to change color of span element when hovering image.So simple but so hard.Sorry if question is stupid ...

HTML

<table border="0" width="100%" cellspacing="9" id="zaposlenici">
<tr>
    <td><a href="slike/zaposlenici/Alisa.jpg"><img src="slike/zaposlenici/Alisa.jpg">  
              </a></td>
    <td><a href="slike/zaposlenici/muriz.jpg"><img src="slike/zaposlenici/muriz.jpg">
  </a></td>
    <td><a href="slike/zaposlenici/firdeusa.jpg"><img src="slike/zaposlenici/firdeusa.jpg"></a></td>
    <td><a href="slike/zaposlenici/krekic.jpg"><img src="slike/zaposlenici/krekic.jpg </a></td>
</tr>
<tr>
    <td><span>Salihović Alisa, pedagog</span></td>
    <td><span>Halilović Muriz, direktor</span></td>
    <td><span>Gredelj Firdeusa, bibliotekar</span></td>
    <td><span>Krekić Muhamed, prof.<br> tjelesnog i zdravstvenog<br> odgoja

  </span></td>
   </tr>
    </table>

CSS (i tried to use this code to change color of span)

#zaposlenici tr td img:hover + span a{
color:red;
 }

U can find my working fiddle here

css selectors are a tree-based structure. You cannot have a :hover in one branch of the DOM tree affect a node in a parallel branch. e.g. you'd need something like `img:hover ../../../td/span` oddball selector for something like this to work. But that's more like XPath, which is not what CSS uses or does. — Marc B, Jul 08 '14 at 18:44
This can be achieved with JavaScript, otherwise without re-writing your HTML, you might be out of luck. — TylerH, Jul 08 '14 at 18:45
it needs to be on a table? or you can change table for divs? if so, [this](http://stackoverflow.com/a/23301073/2180785) can help you. Otherwise it's a job for JavaScript. — Frakcool, Jul 08 '14 at 19:02
@Frakcool yeah, it needs to be in tables, othervise, i can have some problems. — Crion, Jul 08 '14 at 19:06
@ Marc B ok, i will try use jquery to make it working.Thank u all :) — Crion, Jul 08 '14 at 19:07

Christopher Harris · Accepted Answer · 2014-07-08T19:07:54.910

-1

Unfortunately, this example isn't possible with CSS. However, this IS a good job for jQuery. Use a hover event on the image and change the CSS on whatever targeted element you so choose. Examples here jquery.com/hover

edited Jul 08 '14 at 19:07

answered Jul 08 '14 at 18:48

Christopher Harris

112
4

Yes, just saying that the way CSS works in the DOM and this use case example, its not possible without javascript. That's all. – Christopher Harris Jul 08 '14 at 18:55
If you update your answer to say it's not possible with CSS, then THAT is the right answer. But to only state to use jQuery without that context is not the right answer. – Erik Philips Jul 08 '14 at 18:57

Changing color of span element on img hover using only css

1 Answers1