Question

我正在研究CSS滑块动画。除了最后一件事之外，一切都已完成：

想要的行为是，如果我将鼠标悬停在滑块上，滑块会增加高度，并且值会在滑块的中心移动。这可以按预期工作，但是当滑块拇指位于新定位的值下方时，它会回到之前的大小（基本上还原动画）。

我认为我需要某种“传递”，所以基本上即使我在技术上没有悬停在滑块上，该值也不会干扰我的动画。

我知道，根本不清楚，这就是为什么我要用codepen来帮助你更好地理解我的意思。更改滑块并将其停在29.然后尝试再次滑动，您将看到错误的效果和我的意思。 https://codepen.io/NickHG/pen/NYOoXR?editors=0110

我也在这里发布代码供将来参考:(注意：使用LESScss完成）：

@temp0-14: #185fb6;
@temp15-19: #00bcd4;
@temp20-23: #ffc107;
@temp24-31: #ef6b52;
@gaps: 8, 4, 4, 15;
@temps: @temp24-31, @temp20-23,@temp15-19, @temp0-14;
@darkText: #000;
@lightText: #fff;
@percentage: 20%;
@desaturate-percentage: 40%;
.gaps-loop(@i, @prevgap) when (@i > 0) {
  @gap: extract(@gaps, @i);
  @temp: extract(@temps, @i);
  .span-gen-loop(@j) when (@j < @gap) {
    @k: @j + @prevgap;
    .temp-@{k} {
      display: block;
      background: @temp;
      color: contrast(@temp, @darkText, @lightText, @percentage);
      &:hover {
        //background: darken(@temp, 8%);
      }
    }

    .temp-color-@{k} {
      color: contrast(@temp, @darkText, @lightText, @percentage);
    }

    .span-gen-loop(@j + 1);
  }
  .span-gen-loop(0);
  .gaps-loop(@i - 1, @prevgap + @gap);
}
.gaps-loop(length(@gaps), 0);
.animate-color-change {
  transition: background 0.8s ease;
}

/* Slider custom style */
@entryHeight: 60px;
@sliderTrackHeight: 25px;
@sliderThumbHeight: @sliderTrackHeight;
@sliderThumbWidth: 25px;

.entry-external-container {
  font-family: "Roboto", sans-serif;
  height: @entryHeight;
  min-height: @entryHeight;
  width: 100%;
  max-width: 400px;
  display: block;
  border: 1px solid black;
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0;
  position: relative;
  .dataName {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    transform: translateY(50%);
    padding-left: 10px;
    z-index: 2;
    animation-timing-function: ease-out;
    animation: dataNameIn 0.4s forwards;
  }
  .dataValue {
    display: block;
    width: 25px;    
    position: absolute;
    top: 0;
    text-align: right;
    right: 10px;
    transform: translateY(50%);
    padding-right: 10px;
    z-index: 2;
    animation-timing-function: ease-in-out;
    animation: dataValueZoomOut 0.1s forwards;
  }
  .slidecontainer {
    width: 100%;
    box-sizing: content-box;
    .custom-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: @sliderTrackHeight;
      outline: none;
      opacity: 0.7;
      margin: 0;
      animation: sliderAnimationBackgroundOut 0.3s;
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: @sliderThumbWidth;
        height: @sliderThumbHeight;
        background: white;
        cursor: pointer;
        transition: height 0.25s, box-shadow 0.4s;
        border: 1px solid rgba(0, 0, 0, 0.6);
        box-sizing: border-box;
        border-radius: 3px;
      }
      &:hover,
      &:active {
        &~.dataName {
          animation: dataNameOut 0.4s forwards;
        }
        &~.dataValue {
          animation: dataValueZoomIn 0.4s forwards;
          &:hover{pointer-events:none;}
        }
        animation: sliderAnimationBackgroundIn 0.3s forwards;
        &::-webkit-slider-thumb {
          border-radius: 0px 3px 3px 0;
          height: @entryHeight;
          box-sizing: border-box;
          border-right: 1px solid rgba(0, 0, 0, 0.5);
          border-top: 1px solid rgba(0, 0, 0, 0.5);
          border-bottom: 1px solid rgba(0, 0, 0, 0.5);
          border-left: none;
          -webkit-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
          -moz-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
          box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
          background: -webkit-gradient(
            linear,
            -20 0,
            100% 0,
            from(transparent),
            to(white),
            color-stop(80%, white)
          );
        }
      }
    }
  }
}

@keyframes sliderAnimationBackgroundIn {
  0% {
    opacity: 0.7;
    height: @sliderTrackHeight;
  }
  100% {
    opacity: 1;
    height: @entryHeight;
  }
}
@keyframes sliderAnimationBackgroundOut {
  0% {
    opacity: 1;
    height: @entryHeight;
  }
  100% {
    opacity: 0.7;
    height: @sliderTrackHeight;
  }
}


@keyframes dataNameOut {
    0% {opacity: 1;top: 0}
    20% {opacity: 0;top: -15px}
    100% {top: -40px;opacity: 0}
}
@keyframes dataNameIn {
    0% {top: -40px;opacity: 0}  
    20% {opacity: 0;top: -15px}
    100% {opacity: 1;top: 0}

}

@keyframes dataValueZoomIn {
      0% { transform: scale(1); top: 5px; right: 7.5px;}
      25% { transform: scale(1.2);  top: 10px; right: 10px;}
      50% { transform: scale(1.3);  top: 15px;right: 11px;}
      75% { transform: scale(1.4);  top: 20px;right: 13px;}
      100% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
@keyframes dataValueZoomOut {
      100% { transform: scale(1); top: 5px; right: 7.5px;}
      75% { transform: scale(1.2);  top: 10px; right: 10px;}
      50% { transform: scale(1.3);  top: 15px;right: 11px;}
      25% { transform: scale(1.4);  top: 20px;right: 13px;}
      0% { transform: scale(1.5);top: 20px;right: 13.7px;}
}

Answer 1

使用pointer-events来阻止元素悬停：

指针事件CSS属性指定在什么情况下（如果任何）特定的图形元素可以成为鼠标的目标事件

.dataValue { 
    pointer-events: none;
}

PEN

Answer 2

您可以达到将悬停状态设置为父级的相同效果。

PEN

.slidecontainer {
    width: 100%;
    box-sizing: content-box;
    &:hover {
      .custom-slider {
       ...
      }
    }
  }

注意：深度嵌套超过3级不是一个好习惯，

CSS - 动画在鼠标悬停时触发

2 个答案: