How to apply Hover to all *siblings or *children?

Asked

Viewed 872 times

1

Good evening Guys, this is my first question here on the forum, so sorry if it doesn’t formulate in the best way.

The problem I’m facing is applying the css effect :Hover to all sibling or child elements (may vary). Next, I will by means of an image, display the generated DOM to clarify better. DOM gerado

So, as I said, the need is to apply the effect on the children of ". t-body-Row", which are all these ". t-body-col" without affecting the grandchildren and great-grandchildren, etc...

I was trying to apply to all the brothers of ". t-body-col:Hover" but I was able to come up with a code that would satisfy my need.

I did several tests, all without success.

Applying only ". t-body-Row:Hover{ background: #ccc}" the effect is passed on to the whole ". t-body-Row" in question, however I need to divide the effect, not allowing it to be passed on to others.

Ps.: It would solve my problem if it managed to apply :Hover on all direct siblings of ". t-body-col" in case any of them are over :Hover.

Thanks for your attention. Very Obg

css front-end sass hover

  • If I understand correctly: .t-body-row:hover > .t-body-col { background: #ccc}

  • In this case it propagates the Hover effect to the others... What I need is that when the mouse comes on t.body-col all the brothers get the different background

  • What I did there in the example is exactly what you described. When doing Hover in t-body-Row, the t-body-col DENTRO in this t-body-Row get bg different, but if that’s not what you want, it would be nice for an image in your post demonstrating how it was meant to look

1 answer

0

Italo made a simple example that may help you. But I already say that when you make a :hover in the child, you are automatically doing the :hover in the father. In short you can’t change the father when you do the :hover on child only with CSS

See the example. Note that you can have different effects, but doing :hover in the son you can not prevent the father tb is in the state of :hover, for it is an element within the other...

.t-body-row:hover > .t-body-col {
    background-color: #f00;
}
.t-body-row > .t-body-row:hover > .t-body-col {
    background-color: #f0f;
}
<div class="t-body-row"> t-body-row
    <div class="t-body-col">A</div>
    <div class="t-body-col">B</div>
    <div class="t-body-col">C</div>
    <div class="t-body-col">D</div>
    <div class="t-body-row"> t-body-row
        <div class="t-body-col">E</div>
        <div class="t-body-col">F</div>
        <div class="t-body-col">G</div>
        <div class="t-body-col">H</div>
    </div>
</div>

EDIT:

Option creating a container to group the first set of elements. Note that I created a div com class="filho1" that encompasses the first group of elements, that way you can stylize each independent group, I don’t know if you can touch the structure of HTML, but if you get this Telvez is an option...

.filho1:hover > .t-body-col {
    background-color: #f00;
}
.t-body-row:hover > .t-body-col {
    background-color: #f0f;
}
<div class="t-body-row"> t-body-row
    <div class="filho1">
        <div class="t-body-col">A</div>
        <div class="t-body-col">B</div>
        <div class="t-body-col">C</div>
        <div class="t-body-col">D</div>
    </div>
    <div class="t-body-row"> t-body-row
        <div class="t-body-col">E</div>
        <div class="t-body-col">F</div>
        <div class="t-body-col">G</div>
        <div class="t-body-col">H</div>
    </div>
</div>

  • hugocsl, before hand I thank you for your help... I get the idea.. One way to solve my problem (I was thinking), was to apply Hover to all brothers of t-body-col once one of these brothers is up :Hover. But I didn’t get anything 100% effective..

  • @Italobrito quiet young, just keep in mind that when you do Hover in a div that is inside the other you are actually doing Hover in both.... And even though the mouse is on an internal element of the father div you can not take the father’s style, if he also has styles when hovado. Apparently this is your case... You can even research how to change the style of the father interacting in the son and will see that it is not possible... You can read it here and here https://answall.com/questions/13876/alguma-maneira-de-stylize

  • you’re right. So I was thinking of changing the strategy to generate this Hover effect by line, avoiding t-body-Row and starting p t-body-col. By the way, there is some suggestion on how I could apply Hover to all brothers of the same type ?

  • Guy would normally use the dial ~ but he just grabs the brothers down, he won’t catch the elements that are above him. I did a EDIT in my answer sometimes it can help you.

  • This reply may interest you to better understand what I said in the comment above about not taking the elements over the brother, only what comes below... https://answall.com/questions/317473/css-peg-siblings-antes-element/317489#317489

  • I’m sure you helped me a lot, although I haven’t been able to solve the problem as I’d like, but the light was good, I think I’ll try something in html, but tbm will be difficult because this html is dynamic, generated through a recursive component, creating a list of sublevels. But I’ll try to break it. :-]

  • @As I told you this case is difficult to solve only with CSS. But good luck there in the project

  • I understood @hugocsl perfectly. Sooner or later my friend will be right. Vlw for help and patience. :-]

Show 3 more comments

Browser other questions tagged css front-end sass hover

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