CODEWITHSUNDEEP
css
OwnurD
OwnurD

Reputation: 195

How to affect next element of parent element when hover

Html : 

<div class="first">
   <div class="first-sub">
       <a href="#"></a> 
   </div>
</div>
<div class="second"></div>

When I hover on a element, need to effect div which has class .second

Can I do this with only css ? or should I use javascript too ?

Upvotes: 0

Views: 2273

Answers (2)

Delphine
Delphine

Reputation: 888

I found a solution proposed in another forum & in another post here. 

.parent-hover-block {
    pointer-events: none;
    background-color: black;
    padding: 15px;
}

.parent-hover-block > span {
    pointer-events: auto;
    background-color: orange;
    margin: 50%;
}

.parent-hover-block:hover ~ .element-to-border-at-span-hover{
    border: 1px dashed red;
}

.element-to-border-at-span-hover{
    margin: 20px;
    padding: 15px;
    text-align: center;
}
<div class="parent-hover-block">
<span>Hovered child (icon)</span> 
</div>
<div class="element-to-border-at-span-hover"> Block to be border at span hover</div>

But be careful with pointer-events.

More info here : How to style the parent element when hovering a child element?

Upvotes: 0

maioman
maioman

Reputation: 18764

you could use the general sibling selector: 

div:hover ~ div.second{background:yellow}
<div class="first">
   <div class="first-sub">
       <a href="#">first</a> 
   </div>
</div>
<div class="second">sec</div>

Upvotes: 1

Related Questions