Debug :hover selectors in CSS
When styling HTML you may need to define a hover style the css of which might look like this:
div.something:hover {
background-color: red;
}The div with class something will now have a red background when your mouse hovers over it.
This can be hard to debug however, if this were a regular style we could inspect it and change the style of the element in dev tools. With hovers, the style is only available in dev tools when the mouse is physically over the element.
Chrome has a facility to declare that a hover state should be on for an
element. Simply open dev tools and in the "Elements" tab right click an
element to get a context menu. The menu will have options :active, :hover,
:focus, and :visited. Choose :hover and the hover state will be permenantly
affixed to that element. You can now play with the hover style until it looks
right.