0

Olá, estou aplicando hover a um elemento, e este contem um pseudo elemento before, no qual está recebendo os efeitos de hover de seu elemento pai.

Esta imagem mostra o problema:

inserir a descrição da imagem aqui

Veja que o elemento com o número 3 ao ativar o hover também ativa os efeitos em seu ::before (a pequena linha vertical que liga os circulos), acredito que este problema seja exatamente por conta da herança.

Aqui está o código com o exemplo no codepen: https://codepen.io/Mslacerda/pen/ZMmQer

Há alguma forma de resolver isso? E se possível apenas com o SCSS/CSS.

Agradeço desde já ;).

5
  • 1
    Huumm, deixa ver se eu entendi, no caso usar a estrutura com uma lista não é a melhor opção? ou é apenas a organização do HTML? se caso for isto, poderia dar um exemplo? Valeu!
    – MSLacerda
    Commented 18/09/2018 às 12:22
  • 1
    Falo só do problema de usar before: se a intenção é o elemento ser independente. O inverso ainda funcionaria (o elemento "fixo" ser o principal, e o before receber o hover). A solução simples provavelmente ou é separar o elemento do before, ou aninhar um elemento extra e fazer o hover atuar nele. Mas ai tem que ver como você vai usar esse código. Eu sempre dou preferência para a estrutura com menos elementos possíveis. A parte ruim de inverter o before com o elemento principal é colocar a numeração no pseufoelemento, o que talvez não seja o melhor caminho semanticamente.
    – Largato
    Commented 18/09/2018 às 12:26
  • Certo, obrigado, vou tentar organizar melhor a ideia, e tentar ver uma solução mais semântica, o código ainda está bem bruto, vou tentar organiza-lo mais e deixar mais limpo, talvez fique melhor de encontrar um caminho mais simples pra isso.
    – MSLacerda
    Commented 18/09/2018 às 12:36
  • 1
    É que o SCSS tem esse lado, ao mesmo tempo que ele deixa enxuto o fonte, ele atrapalha debugar esses pequenos detalhes, pq vc tem que partir de uma estrutura em HTML mais em ordem pra dar certo. Normal tentar de mais de uma maneira até eleger a definitiva.
    – Largato
    Commented 18/09/2018 às 12:38
  • 1
    Aqui tem uma resposta que pode te ajudar, mas seria um "jeitinho" o ideal e como o Bacco falou! Nessa resposta vc pode ao fazer o hover no pai aumentar o scale dele ao mesmo tem que diminui o scale no filho. Como o código da pergunta não estava bom na resposta ficou meio estranho, mas as vezes te atende de vc não quiser mexer na estrutura do html pt.stackoverflow.com/questions/318617/…
    – hugocsl
    Commented 18/09/2018 às 12:56

1 Resposta 1

0

De acordo com o que foi discutido na questão, eu acabei reformulando a estrutura:

Não encontrei uma forma melhor do que adicionar dinamicamente um elemento <div> entre cada <li></li>.

A quantidade de div's é a quantidade de li's menos 1, onde eu iterei até o N-1 e assim fui adicionando na DOM.

Obs. A adição de um novo elemento também foi elevada quando foi necessário adicionar novos efeitos no elemento que liga os outros.

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 .