How to apply hover on all * siblings or * children?

Question

How to apply hover on all * siblings or * children?

Navigation

#1 by (0 votes)

1

Good evening, this is my first question here in the forum, so sorry if you do not put it in the best way.

The problem I am facing is to apply the css: hover effect on all sibling elements or children (may vary). Next, I go through an image, display the generated DOM to clarify better.

So,asIsaid,theneedistoapplytheeffecttothechildrenof".t-body-row", which are all these ".t-body-col" without affecting grandchildren and great-grandchildren etc ...

I was trying to apply to all ".t-body-col: hover" siblings, but I could not get a code that would meet my need.

I ran several tests, all of them unsuccessful.

Applying only ".t-body-row: hover {background: #ccc}" the effect is going over all of the .t-body-row in question, however I need to split the effect, not allowing it to be passed on to the rest.

Ps: I would solve my problem if I could apply: hover on all direct brothers of ".t-body-col" if any of them are on: hover.

Thank you in advance for your attention. Very Obg

css sass front-end hover

asked by anonymous 05.09.2018 / 05:18

1 answer

Submit a form using request in php How to insert value of a query into a variable in Shell Script?

score 0 · Answer 1

Italo made a simple example that might help you. But already that when you make a :hover in the child, you automatically tb is doing :hover in the parent. In short you can not change the parent when doing :hover in the child with CSS only

See the example. Note that you can have different effects, but doing :hover in the child you can not prevent the parent tb from being in the :hover state, since it is an element inside 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 includes the first group of elements, that way you can stylize each independent group, I do not know if you can tweak 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>