2010-12-19 120 views
3

我曾試圖在這裏的許多不同的答案對這個問題查找和使用他們的解決方案的嘗試,但它似乎沒有工作,像這樣的解決方案: Is it possible to hide href title?隱藏標題屬性在鼠標懸停

我的問題當用戶將鼠標懸停在圖片上時,我該如何隱藏標題屬性工具提示?我嘗試使用<span title=" ">text</span>,但它只是導致標題工具提示顯示空間或跨度的標題屬性。

這是我的website

+1

那麼爲什麼有一個標題屬性? – 2010-12-19 01:59:47

+0

@bemace:我有一個title屬性的原因是因爲對於我使用的Lightbox,ColorBox,它將title屬性作爲圖庫內部的名稱讀入。我希望能夠使用此功能,以便查看圖片的其他人可以瞭解每件作品。 – Abriel 2010-12-20 01:09:05

+0

好的,這使得事情更清楚 – 2010-12-20 02:54:47

回答

7

我想出了我的問題的答案。謝謝格特G讓我開始! =]

我做以隱藏標題屬性,是第一個把一切都變成一個循環,否則,它會第一時間鏈接的標題,並將其應用到圖片點擊什麼:

$("a[rel='portfolio']").each(function(e) { 

} 

然後,我宣佈一個包含標題,你希望他們任何元素應用到一個變量:

var title = $(this).attr("title");

一旦我聲明的變量,然後,我創建時,它的鼠標放在一個隱藏標題功能, n當我將鼠標移到它上面時(爲了使用我的lightbox,ColorBox),我們添加了標題。

$(this).mouseover(
     function() { 
      $(this).attr('title',''); 
     }).mouseout(
      function() { 
      $(this).attr('title', title); 
    }); 

爲了標題要查看點擊的時候,你必須添加其他功能:

$(this).click(
     function() { 
      $(this).attr('title', title); 
      } 
     ); 

全部放在一起,它看起來像這樣:

$("a[rel='portfolio']").each(function(e) { 
    var title = $(this).attr('title'); 
    $(this).mouseover(
     function() { 
      $(this).attr('title',''); 
     }).mouseout(
      function() { 
      $(this).attr('title', title); 
    }); 
    $(this).click(
    function() { 
     $(this).attr('title', title); 
     } 
    ); 
}); 

我希望這可以幫助其他人尋找類似或完全的解決方案!

您可以查看更改here

1

感謝阿布裏埃爾的解決方案,我已經把它轉換到YUI 3及以下的情況下,任何人的代碼需要它

YUI().use('node', function(Y) { 
    Y.all("a[rel='portfolio']").each(function(node) { 
     var title = node.get('title'); 
     node.on('mouseover', function(ev) { 
      ev.target.set('title', ev.target.get('text')); 
      ev.target.on('mouseout', function(e) { 
       e.target.set('title', title); 
      }) 
     }) 
     node.on('click', function(ev) { 
      ev.target.set('title', title); 
     }) 
    }) 
}) 
+0

謝謝! =]將它轉換爲YUI絕對是一個好主意。 – Abriel 2012-04-01 17:57:37

1

我一直在尋找一個jQuery解決方案,但我使用的是工作的JavaScript解決方案對於我來說足夠了。我需要「標題」屬性來傳遞關於產品/圖像的描述性信息,並且在該描述性信息中存在所需的基本html標籤。所以只要有人將鼠標移到圖像上,這個混合代碼和描述就會彈出。這不太理想,所以我使用下面的代碼,以便在鼠標懸停期間隱藏「標題」信息,但標題信息仍然可用。

將此鏈接添加到您的鏈接代碼!希望這可以幫助別人:

onclick=\"javascript: this.title='description and or html goes here' ;\" 
onMouseOver=\"javascript: this.title='' ; 

乾杯!

0

它的工作原理是這樣的:

1:創建自己的屬性,並從收藏夾

<a href="www.website.com" stitle="hello">click me</a> 

2叫它:jQuery的文件重命名title屬性:

getAttribute('stitle') 
0

我用它作爲我的工具提示,但它應該工作,即使沒有它。

我嵌套我的鏈接,並在其中放置標題。比成嵌套圖像我寫了title =「」(與那個空間)。

<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter" 
<img title=" " src="../img/email.png" alt="email icon" width="32"> 
</a> 

比懸停在我的電子郵件圖標上時沒有標題顯示。

+0

什麼?這是解決方案!這個問題的作者並不知道把單個標題=「」與空格放在一起是不夠的。我告訴他爲什麼以及如何製作它。不明白你的行爲,對不起。 – Michal 2014-06-22 09:29:16

+0

是的,我寫道:「比起當我懸停在我的電子郵件圖標上時,**沒有顯示標題**。」對我來說,這個嵌套工作很簡單,所以我在這裏寫了。 – Michal 2015-08-02 19:47:17