Prevent the pseudo element ::before from receiving the effects of Hover applied to its parent

Asked

Viewed 95 times

0

Hello, I’m applying Hover to an element, and this one contains a pseudo element before, in which it is receiving the effects of Hover of his parent element.

This image shows the problem:

inserir a descrição da imagem aqui

Note that the element with the number 3 when activating the Hover also activates the effects on your ::before (the small vertical line that connects the circles), I believe that this problem is exactly due to inheritance.

Here is the code with the example in codepen: https://codepen.io/Mslacerda/pen/ZMmQer

Is there any way to fix this? And if possible only with SCSS/CSS.

Thank you in advance ;).

css css3 hover scss pseudo-elements
  • 1

    Huumm, let me see if I understand, in case using the structure with a list is not the best option? or is it just the organization of HTML? if this is the case, could you give an example? Thanks!

  • 1

    I’m just talking about the problem of using before: whether the intention is for the element to be independent. The reverse would still work (the "fixed" element being the main one, and the before receiving the Hover). The simple solution is probably either to separate the before element, or to nest an extra element and make the Hover act on it. But there has to see how you will use this code. I always give preference to the structure with fewer possible elements. The bad part of reversing the before with the main element is to place the numbering on the pseufoelement, which may not be the best way semantically.

  • Okay, thank you, I’ll try to organize the idea better, and try to see a more semantic solution, the code is still pretty rough, I’ll try to organize it more and make it cleaner, maybe it’s better to find a simpler way to do it.

  • 1

    It is that the SCSS has this side, while it leaves the source dry, it hinders debugging these small details, because you have to start from a structure in HTML more in order to work. Normal to try more than one way until electing the definitive.

  • 1

    Here is an answer that can help you, but it would be a "way" the ideal and as Bacco said! In this answer you can when making the Hover in the father increase his Scale to the same one has to decrease the Scale in the son. As the code of the question was not good in the answer got a little strange, but sometimes you do not want to touch the structure of html https://answall.com/questions/318617/evitar-scale-com-hover-em-link-dentro-de-uma-li/318619#318619

1 answer

0


According to what was discussed in the question, I ended up reformulating the structure:

I couldn’t find a better way than to dynamically add an element <div> between each <li></li>.

The amount of div’s is the amount of li’s minus 1, where I have gone through the N-1 and so have been adding into the DOM.

Obs. The addition of a new element was also high when it was necessary to add new effects in the element connecting the others.

Browser other questions tagged css css3 hover scss pseudo-elements

You are not signed in. Login or sign up in order to post.