Question

这里有点棘手的情况，我有以下课程：

<li><a href="test.html" class="hvr-overline-from-left">Test</a></li>

这是它的CSS：

.hvr-overline-from-left {
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0%;
  background: #47953F;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

这是向下滚动时应该改变的内容：

.hvr-overline-from-leftsmall:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 15%;
  background: #47953F;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

这就是我的尝试：

$(document).ready(function($){
    var line = $('.hvr-overline-from-left:before');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 13.35) {
            line.addClass("hvr-overline-from-leftsmall:before");
        } else if($(this).scrollTop() >= 0) {
            line.removeClass("hvr-overline-from-leftsmall:before");
        }
    });
});

这不起作用，我的问题是如何使这项工作正常进行？我不知道应该调用什么类来改变伪元素。

Answer 1

您只需添加类 Bucket，而不添加hvr-overline-from-leftsmall选择器; e.g：

:before

（当然line.addClass("hvr-overline-from-leftsmall"); // No :before here -----------------------^以后也一样。）

如果在removeClass类规则之后定义，它将优先于任何样式冲突。

hvr-overline-from-left是规则选择器的一部分，而不是类。

Answer 2

您可以在没有伪元素的情况下更改类：

if ($(this).scrollTop() > 13.35) {
    line.addClass("hvr-overline-from-leftsmall");
} else if($(this).scrollTop() >= 0) {
    line.removeClass("hvr-overline-from-leftsmall");
}

当您更改课程时，::before会自动进入，因为它会覆盖您的hvr-overline-from-left规则。

Answer 3

您不必为此重写所有样式。像这样改变你的CSS：

.hvr-overline-from-left {
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0%;
  background: #47953F;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-left.small:before {
  top: 15%;
}

然后在您的脚本中添加/删除small类：

if ($(this).scrollTop() > 13.35) {
    line.addClass("small");
} else if($(this).scrollTop() >= 0) {
    line.removeClass("small");
}

将自定义的psuedo CSS添加到类中

3 个答案: