主页 / 问题 / 1075627
Accepted
Бармалей
Asked:2020-01-29 07:03:12 +0000 UTC2020-01-29 07:03:12 +0000 UTC

为什么悬停事件不起作用？

  • 772

我不明白为什么这种类型的悬停事件不起作用

.way1:hover .arrow{
  transform: rotate(0deg)
}

https://jsfiddle.net/srb72wnu/1/

css

2 个回答

  1. Best Answer

    因为.arrow不在里面.way1，，，.way2。.way3

    body {
  margin: 0;
}

.way1,
.way2,
.way3 {
  position: absolute;
  background-size: 80%;
  background-position: bottom;
  width: 100%;
  height: 50%
}

.way1 {
  background: red;
  top: -5px;
}

.way2 {
  background: green;
  bottom: 0;
  right: 50%;
  margin-top: 5px;
  margin-right: 3px;
}

.way3 {
  background: blue;
  bottom: 0;
  left: 50%;
  margin-top: 6px;
  margin-left: 3px;
}

.center {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  background: #e6e6e6;
  position: absolute;
  top: -6px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: pulse 2s infinite, pulse2 2s infinite;
}

.arrow {
  transition: 2s;
  border-radius: 50%;
  width: 10px;
  height: 80px;
  background: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.way1:hover~.arrow {
  transform: rotate(0deg);
}

.way2:hover~.arrow {
  transform: rotate(135deg);
}

.way3:hover~.arrow {
  transform: rotate(225deg);
}
    <div class="way1"></div>
<div class="way2"></div>
<div class="way3"></div>
<div class="center"></div>
<div class="arrow"></div>

    如果条件在 sass 中有效，为什么不给出 - https://jsfiddle.net/2ysenbxL/3/

    /* Почему не работает? */
$arrowPosition: way1
.way1:hover~.arrow
  @if $arrowPosition == way2
    transform: rotateZ(290deg)
    $arrowPosition: way1
  @else
    transform: rotateZ(0deg)
    $arrowPosition: way1
.way2:hover~.arrow
  @if $arrowPosition == way1
    transform: rotateZ(-134deg)
    $arrowPosition: way2
  @else
    transform: rotateZ(225deg)
    $arrowPosition: way2
  transform: rotateZ(225deg) /* <- лишняя строчка */
.way3:hover~.arrow
  @if $arrowPosition == way1
    transform: rotateZ(135deg)
    $arrowPosition: way3
  @else
    transform: rotateZ(225deg)
    $arrowPosition: way3

    你有一个额外的线那里transform: rotateZ(225deg)。

    • 6

  2. 您的样式应用于箭头类，其元素位于类 way1 的元素内。

    如果您需要hover申请.way1

    .way1:hover{
  transform: rotate(0deg)
}

    如果需要申请hover在.arrow哪个里面.way1

    .way1 .arrow:hover{
  transform: rotate(0deg)
}
    • -1

相关问题