How to Inspect an element that only appears when I hover in another element?

4

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

How do I inspect an element that only appears when the other has 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>
    
asked by anonymous 06.11.2018 / 13:01

1 answer

8

Follow these steps:

  • Click on the element you need to give hover and inspect element in it.

  • In 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 does not exit.

    ForFirefox,insteadofthe:hovbuttonthereisthe withtitle" Toggle pseudo-classes ".

        
    06.11.2018 / 13:06