Jquery: Как мне обратиться: до занятий? - PullRequest
Новая
       2

Jquery: Как мне обратиться: до занятий?

1 голос
/ 09 августа 2010

Моя цель: при наведении мыши на ссылку, чтобы определенный элемент на странице изменил .class: перед содержанием на что-то из заголовка ссылки.

Таким образом:

Я хочу изменить содержимое .class: before, а именно .test: before. Однако 

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

не выполняет работу. Как мне обратиться: до занятий?

В качестве альтернативы я мог бы использовать .before (); - пока не знаю как сбросить .before (); как только моя мышь отключена от ссылки. Может ли быть альтернативным решением?

Посмотрел документацию jquery - не могу найти решение - возможно, из-за моего ограниченного знания jquery;)

Помощь оценена!

Ответы [ 3 ]

3 голосов
/ 09 августа 2010

Интересный вопрос.

$ (x) - селектор ... вы ищете конкретный объект DOM.Но псевдокласс CSS не является объектом DOM.Это просто объявление в CSS.

Я не уверен, что вы МОЖЕТЕ напрямую манипулировать этим с помощью jQuery.

Однако вы можете просто применить новый класс с помощью jQuery: 

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

Затем в вашем CSS: 

#test.hover:before

, что тогда переопределит ваш стандарт #test: before

2 голосов
/ 09 августа 2010

Я не уверен в подходе, который вы используете (так как я никогда не использовал псевдокласс: before с манипуляциями с jQuery), но он использует функцию .hover () и делает почти то же самое. 

$(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
        }
    );

});

Нечто подобное может сделать то, что вы ищете.

0 голосов
/ 10 августа 2010

Остин: потрясающе!

Я пошел почти так же: 

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>");

   });

};

Спасибо остальным!

...