jQuery $(this) pseudo selector

Question

I have a link which I want to addClass on mouseover like following:

$("#navbarlarge").on("mouseover","a",function(){
                $(this).addClass("linkeffect");
})

The issue is that I also want to add a class to both ::before and ::after pseudo elements inside the link , tried this but doesn't work:

$(this).find("::before").addClass("beforeeffect");

how can i combine this selector with the pseudo element ?

Even "pure" Javascript will not allow you to match or manipulate pseudo-elements. — Frédéric Hamidi, Jan 07 '15 at 10:46
Why are you trying to use `before` and `after` in JQ? just add class and define `before` and `after` in css! — Bharadwaj, Jan 07 '15 at 10:48

score 5 · Answer 1 · answered Jan 07 '15 at 10:47

5

You can't. Pseudo-elements are not selectable by JavaScript and therefore are not selectable by jQuery either.

Attach the class to the element itself, and apply CSS with #navbarlarge a... waitaminute.

Dispense with jQuery entirely.

#navbarlarge a:hover {
    /* styles to apply to hovered link */
}
#navbarlarge a:hover::before {
    /* styles to apply to hovered link before pseudo */
}
#navbarlarge a:hover::after {
    /* styles to apply to hovered link after pseudo */
}

answered Jan 07 '15 at 10:47

Niet the Dark Absol

320,036
81
464
592

thanks for your answer , but actually that is the problem , i removed css events because i want my events to be controllable via jQuery because i trigger it elsewhere. – ProllyGeek Jan 07 '15 at 10:49
@chipChocolate.py why dont you show your answer please ? – ProllyGeek Jan 07 '15 at 10:50
@ProllyGeek Why don't you check the answers of the duplicate question? – Ram Jan 07 '15 at 10:51
@ProllyGeek - I will vote to repoen, if it is reopened I'll answer otherwise add a Fiddle. – Weafs.py Jan 07 '15 at 10:52
@Vohuman cause simply it doesnt answer my question already checked , please reopen my question , if no one answers i will delete it no worries. – ProllyGeek Jan 07 '15 at 10:53
@ProllyGeek In that case, just replace `:hover` with `.someClass` – Niet the Dark Absol Jan 07 '15 at 10:54
@ProllyGeek I believe some of those answers "do" answer your question, however, I'll re-open, no worries! – Ram Jan 07 '15 at 10:55
@Vohuman thx alot , trust me if they do i would not really ask a question here , wasting my time is not something i would do :) – ProllyGeek Jan 07 '15 at 10:55
2

@chipChocolate.py it is your chance to show long awaited answer , please do . – ProllyGeek Jan 07 '15 at 10:56
@Vohuman ok after reading precisely , i think some answers may afford work around however , this will make me change lot of coding in my case , so just lets wait for chip answer , if not , guess i will have to accept work arounds , thank you. – ProllyGeek Jan 07 '15 at 10:59
@Vohuman you can mark as duplicate , or should i delete the question – ProllyGeek Jan 07 '15 at 11:07
@ProllyGeek I can only "vote to close" once. I did and retracted my vote and now I can't. – Ram Jan 07 '15 at 12:23
@Vohuman i voted to close anyway , just want this to stay as a reference to the duplicate question just in case. – ProllyGeek Jan 07 '15 at 12:33

score 1 · Answer 2 · edited May 23 '17 at 12:12

Don't know if this will help, it does the same sort of thing and you can style the span as req'd. Been trying a while and the only other way I found that was any cop was adding a style direct to the head like in this thread SO Manipulating psuedo elems, I see from the comments there was a thread posted on this thread but it isn't showing up anymore so not sure if it's the same one.

$( "a" ).hover(
  function() {
    $( this ).append( $( "<span>>>></span>" ) );
    $( this ).prepend( $( "<span><<<</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
    $( this ).find( "span:first" ).remove();
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">Hover Me</a>
<a href="#">Hover Me</a>

jQuery $(this) pseudo selector

2 Answers2