I have webpage with several images and hyperlinks applied to each image. Each image also has a text title above it and a text model number below it. I want to mouseover each image (on a desktop computer) and automatically have the associated title and model# text to change color (akin to a Hover state change). How do I accomplish that?
I know I can create a new Class and apply that Class to the image and title and model#, but mousing over the image doesn’t trigger the hover states of the text, so that isn’t a solution.
I also know I can create a new Class and apply that Class to the Column that contains my Image and two pieces of text, but that isn’t what I want either because a mouseover anywhere inside that container will trigger the text color change. I only want the text color change to occur when the arrow pointer is hovering above the image because only the image has a hyperlink.
Again, I want to mouseover the IMAGE and have the text above and below it change color (for as long as the arrow pointer is hovering above the associated image). The aim is for the text color change to be a visual indicator to desktop computer users that their arrow cursor is hovering over that particular image. (The text I am talking about is HTML text, not a graphic. And that text is NOT overlapping the image at all, but sits in a separate box above and below the image.)