Question

我有一个CSS说

div.borderYtoX a:before,
div.borderYtoX a:after {
  position: absolute;
  opacity: 0.5;
  height: 100%;
  width: 2px;
  content: '';
  background: #FFF;
  transition: all 0.3s;
}

当我向下滚动时，我想将此处的背景更改为某种不同的颜色。它影响滚动导航菜单。下面是jQuery代码以及我尝试过但它无法正常工作。有没有办法在这里做到这一点？

$(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', 'rgb(255,255,255)');
          $('div.container a').css('color', '#063193');
          $('.borderYtoX a:before, .borderYtoX a:after').css('background', '#063193');
       } else {
          $('.header').css('background-color', 'rgba(255,255,255,0.3)');
          $('div.container a').css('color', '#fff');
          $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff');
       }
   });
});

Answer 1

您无法使用javascript访问伪元素，因为它们实际上并不存在于DOM中。如果你想操纵它们，可以使用Jquery将override类应用于该元素，并为该新类添加一个css覆盖

CSS

div.borderYtoX a.active:before,
div.borderYtoX a.active:after {

  background: #063193;
}

脚本

$(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', 'rgb(255,255,255)');
          $('div.container a').css('color', '#063193');
          $('.borderYtoX a, .borderYtoX a').toggleClass('active');
       } else {
          $('.header').css('background-color', 'rgba(255,255,255,0.3)');
          $('div.container a').css('color', '#fff');
          $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff');
       }
   });
});

用jQuery改变psudo类

1 个答案: