Force state elements in your browser

Have you tried to inspect an element in its hover state? If you ever did this must have spent a certain predicament, since when you move the mouse to the Dev Tools, the element loses the state of hover and you can not inspect that element that appears only in the hover state.

Know that there are many tools in Your Browser . Chrome and Firefox, and in most browsers is possible to simulate the state of an element, be it active, focus, hover or visited (This does not scroll in firefox). In Chrome with open Elements tab, usually inspect the element and, with it selected, click the icon of an arrow inside a rectangle.

Select the status you want to force the selected element. In most browsers you can click right we’ll have access to the states as well.


If you use Firebug in the right hand column, click on the side of the Style Guide to arrow menu and select your desired state. Firebug also does not offer a state option: visited.


If you use any other browser to develop, do not worry because it is almost all the same. For example on safari simply click right on the DOM element that we are inspecting and click Force Psuedo-Classes and choose which state we want to simulate.