2011-11-23 22 views
0

這裏總共有jquery newb,我想知道在鼠標懸停在某個東西上時出現的兩種類型的文本有什麼區別,以及如果有人能解釋它們兩者非常感謝。jquery css:這兩種類型的懸停文本有什麼區別

第一次懸停文本: 當您將鼠標懸停在這裏的計算器上時,您會看到兩個不同的消息出現在黃色框中。

二懸停文字:

https://twitter.com/#!/BRAINFEEDER

,當你將鼠標懸停在推薦人的形象或將鼠標懸停在小圓圈的「關注」按鈕的右側,會出現一個黑盒子的小三角形,描述你在盤旋。

真的很感激任何信息,再次感謝

+0

它被稱爲** **提示。第一個是由默認瀏覽器的工具提示機制生成的,第二個是JavaScript腳本和CSS樣式的結果。 – Tadeck

回答

1

在計算器,當你將鼠標懸停在投票箭頭稱爲這是默認瀏覽器的這個生成tooltip我們使用title 寫這樣的:在Twitter上

<a title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a> 

在其他類似的是custom tooltip,你的用css創建&如果你想要一些動畫,你也可以使用javascript

這樣寫:

HTML:

<a class="parent"> 
<span class="tooltip">hello</span> 
</a> 

CSS:

.parent{ 
    display:block; 
    position:relative; 
} 
.tooltip{ 
    display:none; 
    position:absolute; 
    top:-20px; 
    left:-10x; 
} 
.parent:hover .tooltip{ 
display:block 
} 
0

您的計算器看到投票向上或向下的工具提示懸停效果;用戶代理對它們進行風格化,而且不能改變它們。如果您在html元素上使用title屬性,則默認應用它們;當您將鼠標懸停在元素上時,會顯示工具提示。

你在twitter上看到的懸停效果,當你看@用戶的圖標,顯示他們的名字,用css和(我假設)通過JavaScript應用樣式;源代碼中沒有太多東西需要查看,而inspect元素不會在a元素或img元素上顯示title屬性。

相關問題