I already told in a previous answer that this mentioning by the HTML tracker is NOT correct. But apparently you didn't read that answer fully. Based on my experience there are only two reasons why you would want to replace a Rollover Image by a rollover state:
- If you are creating a responsive project with Fluid Boxes, to offer that functionality to those users who are on a desktop or laptop where the Hover event is available. Reason: the Rollover image (and Caption) is unavailable in a Fluid Boxes project, options are dimmed.
- If you want to show more than just an image or a caption, sort of a minimized replacement of the Rollover slidelet which is indeed never allowed for HTML output. In a Rollover state you can add multiple objects.
As for your flickering issue: AFAIK it is not possible to click a button without hovering over it, which explains the short appearance of the rollover image. You cannot avoid that, deleting the Down state doesn't help. Cheat on the learner: why would he click that button? Maybe because you left the Hand cursor?
If you want a perfect solution you need to create events: Rollover but also Rollout. That means either using the CpExtra widget which allows the creation of events, or using JavaScript.
Repeating: is this not totally unnecessary? Why not simple use the Rollover Image in a non-responsive project since the result is exactly the same: will appear only on laptop/desktop and you seem not to need multiple objects to appear on Rollover.