How to inspect an element that only appears when I Hover on another element?

Question

How to inspect an element that only appears when I Hover on another element?

I have an element that when making a hover in it will appear a pseudo-element elsewhere on the screen, but I would like to inspect this pseudo-element when it is visible on the screen.

How do I inspect one element that only appears when the other is with hover?

See this simple example

button {
  position: relative;
}
button::after {
  content: "";
  display: inline-block;
  margin-left: 150px;
  background-color: red;
  position: absolute;
}
button:hover::after {
  content: "aqui!";
}

<button>button</button>

4

html css css-hover navegador dev-tools

Author: hugocsl, 2018-11-06

Source

1 answers

score 7 · Accepted Answer

Follow the steps:

Click on the element you need to give the hover and inspect element in it.
In the HTML check that this element is selected and you will see on the right an item :hov
Click :hov and select :hover.

Ready just inspect the element that appeared on the screen and no longer comes out.

For Firefox , instead of the :hov button there is the icon with Title " Toggle pseudo-classes ".