在这里有一个棘手的情况,我有以下类:
<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");
}
});
});
这无效,我的问题是我如何使这项工作正确?我不知道我应该叫哪个课程更改psuedo元素。
您只需添加 class hvr-overline-from-leftsmall
,而无需 :before
selector;例如:
line.addClass("hvr-overline-from-leftsmall");
// No :before here -----------------------^
(当然,稍后removeClass
也是如此。(
提供了在hvr-overline-from-left
类规则之后定义的,它将在任何样式冲突中优先。
:before
是规则选择器的一部分,而不是类。
您只需在没有伪元素的情况下更改类:
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
规则。
您不必为此重写所有样式。更改您的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");
}