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>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Jan 23 '20 at 16:47
Does this answer your question? [How to style the parent element when hovering a child element?](https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) — user1403588, Jan 23 '20 at 16:52
@user1403588 the Q you referring different , I don't like to style the parent I want to condition style on the child by hover on the parent so child can't be hovered itself — Ayman Morsy, Jan 23 '20 at 17:52
You have a lot of `-webkit-` vendor prefixes. I know that Safari has gained a reputation as 2020's Internet Explorer, but it's not that outdated, is it? — Rounin, Jan 23 '20 at 18:31

Rounin · Answer 1 · 2020-01-23T20:07:22.090

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>

score 1 · Answer 2 · answered Jan 23 '20 at 19:56

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>

How to condition styling child by hover on parent only?

2 Answers2