The menu color of the apple website fades out when you hover it, which I believe is wrong because hovering an item is like activating it, hence a positive action.
With that said, what's a logical and reasonable way to choose a hover color?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Let me first set out a few things that make it easier to respond to your question.
Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.
The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.
Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.
Hover states afford click-ability and hence it's suggested that the hover color should be noticeable. In general, a contrast to the background color will help you achieve this desired effect.
You can see an example on this site itself:
The hover color is in accordance with the triad scheme for the base color.
There are some more technical guidelines available for choosing the color of links and hover state. You can refer to G183 document by W3C that recommends using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.
Hope this helps!
There's no real "logic" to it. It's more of a process.
Identify all the visual changes possible:
or any combination of the above. (You can also change sizes of things, but that is problematic so I generally avoid that. It's possible to do right, but complicated.) You want the change to be obvious (enough contrast) and harmonize with the color scheme, and you don't want it to obscure anything (by reducing too much the contrast between the text and background). And you want to be consistent throughout the site/page - all hover effects for all element types needn't be exactly the same, but they should be variations on a theme, and a limited number of variations.
And remember there are no hover effects on touch devices so think of hover effects as just an embellishment for non-touch devices.