Jquery: How do I address :before classes?

Question

My goal: Mousehover a link, have a certain element on the page change the .class:before content to something from the link title.

Therefore:

I want to change the content of a .class:before, namely .test:before. However,

$("#test:before").css("content","whatever the content should be");

does not do the job. How do I adress :before classes?

Alternatively, I could use .before(); - Yet, I don't know how to unset .before(); once my mouse is off the link. Might be an alternative solution?

Looked up the jquery documentation - cant find the solution - probably due to my limited jquery knowledge ;)

Help appreciated!

Answer 1

Interesting question.

$(x) is a selector...you're looking for a particular DOM object. But a CSS pseudo class isn't a DOM object. It's just a declaration in the CSS.

I'm not sure you CAN directly manipulate this via jQuery.

What you could do, though, is just apply a new class via jQuery:

$("#test").hover(function(){$(this).addClass('hover')});

Then in your CSS:

#test.hover:before

Which would then over-ride your default #test:before

Answer 2

I'm not sure about the approach you're using (as I've never used the :before pseudo class with jQuery manipulation) but this uses the .hover() function and does pretty much the same thing.

$(function(){
    //once the page is ready

    //bind some hover events
    $("#test").hover(
        //hover in
        function(){
            $(this).before("<span id = 'test-before'>Before Content here</span>");
            //insert some content before "this"
        },

        //hover out
        function(){
            $("#test-before").remove();
            //remove the content we added
        }
    );

});

Something like this might do what you're looking for.

Answer 3

How about the prev() function? Maybe this would work?

$("#test").prev().css("content","whatever the content should be");

Answer 4

Austin: awesome!

I went nearly the same way:

this.tooltip_link = function(){ 

    $("a.tc_top_link_post").hover(function(e){                                            
        $("#acound_tc_lastfor")
            .css("background-color","#a40000")
            .css("color","white")
            .css("font-weight","bold")
            .css("padding-right","2px")
            .css("padding-left","2px");

        $("#tc_lastfor").replaceWith("<A href='#' id='tc_lastfor'>"+ this.title +"</a>");   
        $("#tc_lastfor").css("color","white");



    },

    function(){

        $("#acound_tc_lastfor")
            .css("background-color","white")
            .css("border-bottom","none")
            .css("font-weight","normal")
            .css("padding-left","0px");

        $("#tc_lastfor").replaceWith("<A href='#' id='tc_lastfor'>LAST 4 MONTHS:</a>");

   });

};

Thanks to the others!