javascript - 目标.class :after:hover in jQuery

Question

我需要在 jQuery 中定位这个 :after:

.a1 {
  position: relative;
}

.a1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: #3f92c3;
  transition: width .4s linear;
  -webkit-transition: width .4s linear;
}

.a1:hover:after {
  width: 100%;
  left: 0;
  background: #3f92c3;
}

滚动代码如下所示(示例):

$(function() {
  var header = $("#header");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
      header.addClass("scrolled");
    } else {}
  });
});

HTML:

<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>

我在大量搜索后发现了这一点并且它起作用了我不知道在我 mouseleave .a1 之后下划线如何保持悬停颜色:

$('#menuwrapper').mouseenter(function() {
  if ($('#pseudo').length) {
    $('#pseudo').remove();
  } else {
    var css = '<style id="pseudo">.a1::after{background: red !important;}</style>';
    document.head.insertAdjacentHTML('beforeEnd', css);
  };
});

我尝试了 mouseleave，但没有成功。

所以我只希望如果我滚动(我知道它是如何工作的)菜单 .a1 下的下划线保持黑色，因为如果我离开下划线悬停它会回到

.a1:after {
  background: #3f92c3;
}

我希望它保持黑色。

Answer 1

:before 和 :after 等伪元素不是 DOM 的一部分，因为它们不是所谓的伪...所以您不能使用 jQuery

定位它们

当你在滚动上添加类 scrolled 时，最好在 css 中使用这个类，比如

.scrolled .a1:after{
  background: black;
}

$(function() {
  var header = $("#header");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
      header.addClass("scrolled");
    } else {
      header.removeClass("scrolled");
    }
  });
});

body {
  margin-top: 150px;
  font: 13px Verdana;
  height: 500px
}

#header {
  list-style: none;
  padding: 0;
  display: flex;
}

#header li {
  margin: 0 10px;
}

.a1 {
  position: relative;
  font-weight: bold;
  text-decoration: none;
}

.a1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: #3f92c3;
  transition: width .4s linear;
  -webkit-transition: width .4s linear;
}

.a1:hover:after {
  width: 100%;
  left: 0;
}

.scrolled .a1:after {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="header">
  <li><a class="a1" href="#">Portfolio</a></li>
  <li><a class="a1" href="#">Services</a></li>
  <li><a class="a1" href="#">Contact</a></li>
</ul>