Suppose I have a button and a square, like this:

main = mainWidget $ do x <- button "Change color." y <- toggle False x z <- mapDyn style y elDynAttr "div" z blank style :: Bool -> Map String String style b | b = "style" =: "height: 10ex; width: 10ex; background-color: #f00;" | otherwise = "style" =: "height: 10ex; width: 10ex; background-color: #900;"

The colour of the square will alternate between bright and dark red when the button is pressed.

I want to replace the button with a green rectangle in such a way that, when mouse pointer is over it, the red square is bright, otherwise dark. For bonus points, I would like the green rectangle to be a div tabindex=0 and to make sure the red square is bright when it has focus, but, once I understand the general approach, I will likely be able to figure that out by myself.