How to condition styling child by hover on parent only?

Question

In the code below when I hover on the gray button [the parent]

it perform some style on the child div bar

and that is what I need, I don't want child to be hovered itself

 .foo { width: 200px; height: 50px; background: gray; margin: 200px; position: relative; }.baz { position: absolute; width: 50px; height: 300px; top: -150px; left: 80px; z-index: -1; border: 1px solid; }.bar { height: 100%; background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center; background-position: cover; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; }.foo:hover.bar { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; }

 <div class="foo"> <div class="baz"> <div class="bar"></div> </div> </div>

Answer 1

This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript , so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:

const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);

This works because the events mouseover and mouseout events are explicitly added to foo , rather than to its grandchild bar (and bar never visibly overlaps foo ).

Working Example:

 const foo = document.getElementsByClassName('foo')[0]; foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false); foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);

 .foo { width: 200px; height: 50px; background: gray; margin: 200px; position: relative; }.baz { position: absolute; width: 50px; height: 300px; top: -150px; left: 80px; z-index: -1; border: 1px solid; }.bar { height: 100%; background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center; background-position: cover; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }.foo.hovered.bar { transform: scaleX(1); transform-origin: right; }

 <div class="foo"> <div class="baz"> <div class="bar"></div> </div> </div>

Answer 2

I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?

Would this fix your issue?

 .foo { width: 200px; height: 50px; background: gray; margin: 200px; position: relative; }.baz { position: absolute; width: 50px; height: 300px; top: -150px; left: 80px; z-index: -1; border: 1px solid; }.bar { height: 100%; background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center; background-position: cover; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; }.foo:hover.baz:not(:hover).bar { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; }

 <div class="foo"> <div class="baz"> <div class="bar"></div> </div> </div>