Search code examples
css-spritesrolloverrolloversrollover-effect

Diagram with Rollovers

I am building a responsive site with WordPress and I need to make an interactive diagram with 3 hotspots: each of the 3 icons in the corners of the triangle here will be a different hotspot...

When the blue is rolled over, blue arrows & text will appear, partly obscuring other parts of the triangle - as seen here. Likewise, when the green is rolled over, green arrows & text are shown. And finally, when the pink is rolled over, pink arrows & text are shown.

I have never tried CSS sprites before but I understand that they're better than the old javascript onMouseOut / onMouseOver method. Can anyone please advise me how I may best go about making this interactive diagram? I'm not very sophisticated at coding. Any assistance would be greatly appreciated.

Thanks!

Solution

  • With CSS you can use the :hover pseudo-class to display something on rollover - no JS needed!

    #main div div {
    display: none;
}

#main div:hover div {
    display: block;
}

    See this fiddle.