主页 / 问题 / 1076181
Accepted
Бармалей
Asked:2020-01-30 18:29:32 +0000 UTC2020-01-30 18:29:32 +0000 UTC

为什么悬停不适用于 flex 内的项目？

  • 772

我不明白为什么悬停事件不适用于 flex 容器内的元素

HTML：

<div class="way1"></div>
<div class="bottom_ways">
  <div class="way2"></div>
  <div class="way3"></div>
</div>

<div class="center"></div>
<div class="arrow">Color</div>

SCSS/SASS：

body
  margin: 0
  overflow: hidden
.way1, .way2, .way3
  text-align: center
  height: 50vh
  width: 100vw
  background-size: cover
  background-repeat: no-repeat
  background-position: bottom
.bottom_ways
  display: flex
.way1
  background: red
  margin-bottom: 3px
.way2
  background: green
  margin-top: 3px
  margin-right: 3px
.way3
  background: blue
  margin-top: 3px
  margin-left: 3px
.center
  position: absolute
  background: #fff
  width: 200px
  height: 200px
  top: 6px
  bottom: 0
  left: 0
  right: 0
  margin: auto
  animation: pulse 2s infinite, pulse2 2s infinite
.arrow
  position: absolute
  width: 83px
  height: 110px
  top: 0
  bottom: 0
  left: 0
  right: 0
  border-radius: 50%
  margin: auto
  transition: 2s
  /* Здесь */
.way1:hover~.arrow
  background: red
.way2:hover~.arrow
  background: green
.way3:hover~.arrow
  background: blue

https://jsfiddle.net/vfj5c6t7/

html

1 个回答

  1. Best Answer

    在css中，你从上到下。~ 允许您引用相邻元素。

    在您的情况下，底部块嵌套在容器中<div class="bottom_ways">

    因此，通过~你只能访问里面的元素<div class="bottom_ways">

    在你的情况下，.arrow上一级。因此，它:hover适用于红色（与 位于同一容器中.arrow）并且不适用于其他两个，因为 他们是较低级别的。

    确保所有 3 个块与要更改背景的元素处于同一级别。

    • 1

相关问题