javascript - 如何仅通过将鼠标悬停在父级上来调节子级样式？

Question

在下面的代码中，当我将鼠标悬停在 gray button 上时[ parent ]

它在 上表现出一些风格子div bar
这就是我需要的，我不希望 child 被自己悬停

.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

我想您希望最终用户将鼠标悬停在水平区域 (div.foo) 上以更改垂直区域 (div.baz div.bar) 但如果 div.baz 本身悬停，则不希望区域发生变化？

这会解决您的问题吗？

.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>