How to affect next element of parent element when hover

Question

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 ?

You cannot go up the DOM if you want to affect the next element only on hovering anchor. — m4n0, Sep 10 '15 at 12:37
This can't be done with CSS for the reason stated by Manoj. Maioman's answer is the closest you are going to be able to get using your existing markup. — Hidden Hobbes, Sep 10 '15 at 13:36
Maybe this helps http://stackoverflow.com/questions/8622611/when-hovering-a-css-list-item-change-the-parent-items-css — Madalina Taina, Sep 10 '15 at 13:37

score 1 · Accepted Answer · answered Sep 10 '15 at 12:33

1

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>

answered Sep 10 '15 at 12:33

maioman

18,154
4
36
42

Anchor number depends on me, I will use 3 anchor element inside of first-sub div. So this way does not work for my question. – OwnurD Sep 10 '15 at 13:22

score 0 · Answer 2 · answered Oct 19 '18 at 16:03

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?

How to affect next element of parent element when hover

2 Answers2