target .class:after:hover in jQuery

Question

I need to target this :after in jQuery:

.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;
}

The scroll code looks like this (example):

$(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>

I found this out after searching alot and it worked byt i don't know how the underline can keep the hover color after i 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);
  };
});

I tried mouseleave but it didn't work.

So i just want that if i scroll (that i know how it works) that the underline under the menu .a1 stay's black , because if i leave the underline hover it goes back to

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

I want it to stay black.

There is no jQuery selector for `:after` or `:before` You need to control it via a class. — Pedram, Feb 17 '18 at 06:59
Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Pedram, Feb 17 '18 at 07:01
Can you explain that answer. Your saying that it can be fixed with css? — , Feb 17 '18 at 17:52

Bhuwan · Accepted Answer · 2018-02-17T17:49:27.880

3

pseudo elements like :before and :after are not the part of DOM because they are not real elements as called pseudo...so you can't target them using jQuery

As you are adding class scrolled on scroll, so better to use this class in css like

.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>

edited Feb 17 '18 at 17:49

answered Feb 17 '18 at 07:05

Bhuwan

16,525
5
34
57

@user9356960 you have to share your full code so that I can solve the issue – Bhuwan Feb 17 '18 at 17:25
Incredible that i have to search for hours only for a underline color – Feb 17 '18 at 17:28
I updated my question, i found out how to change the underline color with some code i found but i don't know how the color can stay black if i leave the underline hover again. So maybe we need to remove that after background and make it black as the header is scrolled. Can you help me with this? Then i am going to work further on my website now. I hope i will hear from you, i am really going crazy about this....... – Feb 17 '18 at 17:40
@user9356960 see it happen sometimes..:)..the main thing you have to go to the right direction to solve the problem otherwise it can take a whole life to solve...BTW I updated my answer and also no need to add background on hover..just add it to `.a1:after` – Bhuwan Feb 17 '18 at 17:52
1

Thank you so much for your time, really appreciate it. Have a good day! – Feb 17 '18 at 18:44

score 0 · Answer 2 · answered Feb 17 '18 at 07:03

0

try to use jQuery hover method, but also you cant touch :after :before elements from jQuery

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");});

answered Feb 17 '18 at 07:03

HDallakyan

740
2
9
24

Nothing works can you make a code for me using this. – Feb 17 '18 at 17:07

target .class:after:hover in jQuery

2 Answers2