Question

I’m building a webpage that has a little piechart on it. The pie has 6 pieces and to the right of this image, I have the text hyperlinks that a person could optionally click, to go to the same place that clicking the piece of pie will take them.

The hover property is set to change the color of the hyperlink on mousehover. Is there a way I can also hover over the image pie piece and still make the text hyperlinks change color, just as if I was hovering over them?

Thanks.

Answer 1

Wrap them in a container, and apply the hover function to that container.

jsFiddle example

CSS:

.container:hover a {
    color: black;
    text-decoration: none;
}

Alternatively use the CSS + selector to select the next sibling element
See this updated example