当我之间有空间（使用不透明度）时，如何使 div 在 hover 上保持可见？

Question

I have a button and if you hover on it a "popup" appears on the right. My problem is that I want to keep the space between the button and the popup. Sometimes it works but sometimes the div is not getting the correct property opacity:1; Does anyone have some tips on how to continue? http://jsfiddle.net/de8afuvr/

<div class="timer-container">
  test
</div>

<div class="auto-update-container">
  <span class="active" title="Refresh every 10 seconds">10s</span>
  <span title="Refresh every 30 seconds">30s</span>
  <span title="Refresh every minute">1m</span>
  <span title="Refresh every 5 minutes">5m</span>
  <span title="Refresh every 15 minutes">15m</span>
</div>

.map-toggles {
  background-color: #fff;
  border-radius: 2px;
  bottom: 36px;
  display: flex;
  flex-direction: column-reverse;
  left: 17px;
  max-height: 42px;
  overflow: hidden;
  position: absolute;
  transition: all 200ms linear;
  z-index: 1;

  &.open,
  &:hover {
    max-height: 600px;
    overflow: visible;
    box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2) !important;
    border-radius: 7px;
  }

  .toggle {
    align-items: center;
    color: #465b67;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 24px;
    height: 42px;
    justify-content: center;
    position: relative;
    width: 42px;

    &.off {
      background-color: #495054;
      color: #869096;

      background-color: transparent;
      color: #c3d4de;
    }

    &.disabled {
      box-shadow: none !important;

      &::after {
        content: '';
        width: 3px;
        height: 30px;
        transform: rotate(45deg);
        background-color: rgb(212, 87, 87);
        position: absolute;
      }
    }

  }

  .toggle-autoupdate {

    .auto-update-container {
      align-items: center;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      height: auto;
      justify-content: center;
      left: 42px;
      opacity: 0;
      position: absolute;
      pointer-events: none;
      top: 0;
      transition: all 200ms linear;
      width: 70px;
      background: #fff;
      margin-left: 10px;
      box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2);
      border-radius: 7px;

      >span {
        align-items: center;
        display: flex;
        font-size: 1rem;
        height: 42px;
        justify-content: center;
        width: 100%;

        &:hover {
          background-color: #456994;
          color: #fff;
          box-shadow: none !important;
        }

        &.active {
          color: #fff;
          background-color: #456994;
        }
      }
    }

    &:hover {
      >.auto-update-container {
        opacity: 1;
        pointer-events: all;
      }
    }

    &.disabled {
      &:hover {
        >.auto-update-container {
          opacity: 0;
          pointer-events: none;
        }
      }
    }
  }
}


.autoupdatediv {
  margin-top: 100px;
  bottom: auto;
  top: 36px;
  left: 20px;
  padding: 1px;
}

Answer 1

Just add padding to this class this will work hopefully.

.timer-container: padding: 10px 15px;