Create a hover that doesn't affect the children

Anyone know how I can create a hover that doesn’t affect the children? (like the image) If I set a background on the parent, and the children doesn’t have a background, they will be affected.

I want to see if there is a solution without adding anything to the children.

I think we will need to see the HTML and CSS you have to create that @qrazyneo1

I think as well as the html and css that you already have for this we will need to know the use case because what you ask on the surface doesn’t seem to hold much logic (to us).

I’m guessing you have an idea in mind but it doesn’t translate well in that drawing. It looks to me as though you only want the ends of the container to highlight but not any of the middle section where there is content. Also what is supposed to happen to the little gaps in-between the borders of those elements as that would be the background of the parent.

By default backgrounds are transparent so you will always see the background of the parent by default. You could give a white background to the children to hide the background but you say you don’t want to do that for some reason.

It would seem to me that the simplest solution is to color the end portions of that container instead and leave the middle blank.

Here’s an example (View full size on codepen for the full effect).

It all depends on why and what you want to achieve :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.