How can I do this trick with css and/or javascript?

Question

This is the code:

HTML:

<img src="..." />

// other stuff 

<div id="image">
<a href="" > bla bla bla </a>
<a href="" > ble ble ble </a>
</div>

CSS:

#image a:hover{color:green;}

I want this:

When the user put mouse over the image, then all the links in the div with id "image" become green ( like if the user put the mouse over the links. ).

If possible I prefer to do this with only CSS.

You really should use a class instead of an id, since technically you should only have 1 of each unique id. — SamHuckaby
– SamHuckaby, Commented May 1, 2013 at 16:44

Adrift · Accepted Answer · 2013-12-10 03:20:29Z

7

img:hover + #image a {
    color: green;
    text-decoration: none;
}

http://jsfiddle.net/Tzpmd/

edited Dec 10, 2013 at 3:20

answered May 1, 2013 at 16:42

Adrift

60.1k12 gold badges98 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adrift Over a year ago

Yep this is supported in IE 8 + and most versions of open source browsers

xRobot Over a year ago

but this works only if there isn't nothign between the image and the links :( jsfiddle.net/QSy9H/4

Adrift Over a year ago

Use the general sibling combinator instead for that situation ~ jsfiddle.net/Adrift/QSy9H/5

Adrift Over a year ago

Because its the <table> thats a sibling of the <img> no the <td> take a look: jsfiddle.net/Adrift/QSy9H/21 .. you need to use #topimg:hover ~ table #image td a instead

2 revs user1106925 · Accepted Answer · 2013-05-01 16:51:17Z

3

img:hover + #image a{color:green;}

Though there are some browser quirks with respect to :hover used with +, so you'll need to do some testing and see if your supported browsers are affected.

And of course + will not be supported in old browsers.

If there's an element in between, you can use ~ instead.

img:hover ~ #image a{color:green;}

edited May 1, 2013 at 16:51

community wiki

2 revs
user1106925

4 Comments

user1106925 Over a year ago

No, some old browsers won't work. And there are some bugs in some browsers when combining :hover with +, so you should test your supported browsers.

xRobot Over a year ago

but this works only if there isn't nothign between the image and the links :( jsfiddle.net/QSy9H/4

user1106925 Over a year ago

@xRobot: Right. That's what your markup example showed. You can change + to ~.

user1106925 Over a year ago

@xRobot: Because #image isn't a sibling of the img. If you want it to affect all nested a elements, use #topimg:hover ~ * a { jsfiddle.net/QSy9H/27, or make * specific to the sibling you want to affect.

strakez · Accepted Answer · 2013-05-01 18:42:50Z

1

@xRobot, the problem with your fiddle is that you're not referencing the sibling of #topimg, which is the table not the tr#image. The element you are referencing is the child of the table element, and niece of the #topimg element (not sibling).

Check this updated fiddle: http://jsfiddle.net/QSy9H/32/

... and using the examples on this page:

img:hover ~ table #image a{ color:green; }

answered May 1, 2013 at 18:42

strakez

355 bronze badges

Collectives™ on Stack Overflow

How can I do this trick with css and/or javascript?

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related