CODEWITHSUNDEEP
htmlcsshoverparent-childsiblings
Valter
Valter

Reputation: 83

Change another div on hover which is not sibling nor child

My HTML code is similar to this :

<div class="navbar">
    <div class="btn-section btn-1">
        <p class="section pro">...</p>
    </div>
</div>

<div class="navbar">
    <div class="btn-section btn-2">
        <p class="section notpro">...</p>
    </div>
</div>

I'm using this in my CSS code :

.btn-1:hover {
    .pro {
        ...
    }
}

It works perfectly.

What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.

.btn-1:hover {
    .pro {
        ... // works
    }
    .notpro {
        ... // doesn't work
    }
}

Is there a way to do this ?

Thank you !

Upvotes: 2

Views: 3160

Answers (2)

Moshe M
Moshe M

Reputation: 91

I don't think this syntax is valid in CSS, meaning selector inside another selector.

You can add :hover to the 'pro' to get different behaviour than the parent div.

Upvotes: 0

gavgrif
gavgrif

Reputation: 15499

There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.

You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.

The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.

.navbar:hover + .navbar .notpro {
 color: red;
}
<div class="navbar">
    <div class="btn-section btn-1">
        <p class="section pro">I am a Pro</p>
    </div>
</div>

<div class="navbar">
    <div class="btn-section btn-2">
        <p class="section notpro">I am Not a Pro</p>
    </div>
</div>

Upvotes: 2

Related Questions