4

Eu tenho um elemento que ao fazer um hover nele vai aparece um pseudo-elemento em outro lugar da tela, porém eu gostaria de inspecionar esse pseudo-elemento quando ele está visível na tela.

Como eu faço para inspecionar um elemento que só aparece quando o outro está com hover?

Veja esse exemplo simples

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>

1 Resposta 1

9

Siga os passos:

  1. Clique sobre o elemento que você precisa dar o hover e inspecione elemento nele.

  2. No HTML verifique que este elemento está selecionado e você verá na direita um item :hov

  3. Clique em :hov e selecione :hover.

Pronto basta inspecionar o elemento que apareceu na tela e não sai mais.

inserir a descrição da imagem aqui

Para o Firefox, ao invés do botão :hov existe o ícone inserir a descrição da imagem aqui com título "Toggle pseudo-classes".

4
  • 6
    Criei um GIF com os passos que você citou, acho que fica mais didático que uma imagem estática. Se discordar, pode reverter a edição sem problemas :D
    – Woss
    6/11/2018 às 12:28
  • 1
    @AndersonCarlosWoss So pelo gif você já merece metade da pontuação :D
    – Isac
    6/11/2018 às 12:39
  • É isso mesmo, Obrigado!
    – hugocsl
    6/11/2018 às 13:32
  • @AndersonCarlosWoss excelente edição! Ficou muito bom e didático para todos consultarem vlw!
    – hugocsl
    6/11/2018 às 13:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .