隐藏溢出无法悬停

Question

我遇到一个问题，其中我正在使用边界半径为50％的div并具有隐藏属性溢出。在这个div中，还有一个带有悬停事件的div。即使光标位于圆形div之外，也会调用悬停事件。

代码：

.check {
  border-radius: 50%;
  height: 100%;
  overflow: hidden;
}

.pad {
  padding: 2%;
}

.bl {
  background: black;
  height: 100%;
  width: 50%;
  position: relative;
  float: left;
  text-align: center;
  padding-top: 3.5%;
  line-height: 8;
}

.gr {
  background: gray;
  height: 100%;
  width: 50%;
  position: relative;
  float: left;
  padding-top: 10%;
  text-align: center;
  font-weight: 600;
}

.out {
  height: 100%;
  width: 200%;
  position: relative;
}

@media only screen and (min-width: 900px) {
  .gr {
    font-size: 6vh;
  }
}

@media only screen and (max-width: 900px) {
  .gr {
    font-size: 4vh;
  }
}

@media only screen and (max-width: 399px) {
  .gr {
    font-size: 3vh;
  }
}

.out {
  transition: all 1s ease-in-out;
}

.out:hover {
  margin-left: -100%;
}

<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
    <div class="check">
      <div class="out">
        <div class="gr">Technology</div>
        <div class="bl">
          <button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
          <br>
          <button type="button" class="btn btn-lg btn-primary">Read Post</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
    <div class="check">
      <div class="out">
        <div class="gr">General Knowldege</div>
        <div class="bl">
          <button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
          <br>
          <button type="button" class="btn btn-lg btn-primary">Read Post</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
    <div class="check">
      <div class="out">
        <div class="gr">Sports</div>
        <div class="bl">
          <button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
          <br>
          <button type="button" class="btn btn-lg btn-primary">Read Post</button>
        </div>
      </div>
    </div>
  </div>
</div>

我只想在循环div内调用悬停事件

Answer 1

删除所有您定义的(array([0.00097481, 0.82290694]), array([[ 4.75261249e-09, -2.28408710e-07], [-2.28408710e-07, 1.41696109e-05]])) ，他们正在创建问题：

position:relative

.check {
  border-radius: 50%;
  height: 100%;
  overflow: hidden;
}

.pad {
  padding: 2%;
}

.bl {
  background: black;
  height: 100%;
  width: 50%;
  float: left;
  text-align: center;
  padding-top: 3.5%;
  line-height: 8;
}

.gr {
  background: gray;
  height: 100%;
  width: 50%;
  float: left;
  padding-top: 10%;
  text-align: center;
  font-weight: 600;
}

.out {
  height: 100%;
  width: 200%;
  overflow:hidden;
}

@media only screen and (min-width: 900px) {
  .gr {
    font-size: 6vh;
  }
}

@media only screen and (max-width: 900px) {
  .gr {
    font-size: 4vh;
  }
}

@media only screen and (max-width: 399px) {
  .gr {
    font-size: 3vh;
  }
}

.out {
  transition: all 1s ease-in-out;
}

.out:hover {
  margin-left: -100%;
}