2010-08-09 38 views
1

我的目標:鼠標懸停一個鏈接,在頁面上有一定的元素將.class:之前的內容改爲鏈接標題的內容。Jquery:我如何解決:在課前?

因此:

我想換一個.class的內容:之前,即。測試:之前。 但是,

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

不做這項工作。我如何在課前上課?

或者,我可以使用.before(); - 但是,我不知道如何解除.before();一旦我的鼠標脫離鏈接。可能是一種替代解決方案?

擡眼jQuery的文檔 - 無法找到解決方案 - 可能是由於我有限的jQuery知識;)

幫助讚賞!

回答

2

有趣的問題。

$(x)是一個選擇器...你正在尋找一個特定的DOM對象。但是一個CSS僞類不是一個DOM對象。這只是CSS中的一個聲明。

我不確定你可以直接通過jQuery來操作它。

你能做什麼,不過,僅僅是通過jQuery申請一個新的類:

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

然後在你的CSS:

#test.hover:before 

然後將過騎默認#TEST:之前

2

我不確定你正在使用的方法(因爲我從來沒有用過:在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

這就是我應該做到的!看看我是如何在那裏做到的 - 它也可以工作。 – 2010-08-09 20:12:14

0

奧斯汀:太棒了!

我去幾乎以同樣的方式:

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

    }); 

}; 

多虧了別人!