abbr標籤的標題可以被樣式化嗎？

看看下面的代碼：abbr標籤的標題可以被樣式化嗎？

<abbr title="World Health Organization">WHO</abbr>

我們可以風格的縮寫標籤的標題？所以，而不是一個自定義的工具提示，我們可以使用標題？

來源

2009-11-05 Joemon

FYI在Firefox的縮寫標籤具有虛線下劃線來表示有什麼東西值得上空盤旋，但無法在Chrome或IE瀏覽器。但他們可以被設置爲像這樣：http://html5doctor.com/the-abbr-element/ – 2016-05-25 03:06:15

如果你的意思是彈出的實際文本的樣式，不，你不能用CSS來設計樣式;它是特定於瀏覽器的。基於Javascript的tooltips將是我處理它的方式，因爲它允許對這種行爲有更多的控制權。

來源

2009-11-05 18:50:08

http://stackoverflow.com/a/11383105/632951似乎是在正確的軌道上... – Pacerier 2012-07-13 00:15:32

您可以設定縮寫版本的出現方式，因此在這種情況下「WHO」。但不是彈出框出現的方式，因爲這是由瀏覽器/操作系統控制的。

您可以通過應用一些JQuery東西任何abbr標籤編程繞過這個限制 - 這將顯示一個div，其內容會讀取相同title上調用它的標籤。

來源

2009-11-05 18:51:17 Amadiere

不，已棄用。使用。 – Pacerier 2012-07-13 00:10:29

其實，Alex Mcp的回答是不正確的。對於現代瀏覽器，完全可以使用CSS來完成此操作。但是，可以使用帶有JavaScript的較舊瀏覽器的後備版本。

abbr { 
    position: relative; 
} 

abbr:hover::after { 
    position: absolute; 
    bottom: 100%; 
    left: 100%; 
    display: block; 
    padding: 1em; 
    background: yellow; 
    content: attr(title); 
}

這將增加使用時的縮寫標籤懸停在標題中的屬性內容的縮寫標籤的絕對定位僞元素右上角。

來源

2012-07-08 12:20:19 DigiKev

我看到黃色背景，但'content：attr（title）;'不起作用。沒有文字。 – Pacerier 2012-07-13 00:15:11

這應該被標記爲正確的答案。 – Baumr 2012-12-20 19:16:28

正如@Pacerier所說，這並不像理解的那樣有效。 – yckart 2013-03-24 19:17:45

我一直在尋找類似的東西，並以下替換上來（在Firefox，Safari和Chrome在Mac上測試，可與IE 7-10當我點擊它），基於this link：

HTML ：

<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>

的jQuery：

$('[title]').each(function() { 
    var mytitle = $(this); 
    mytitle.data('title',mytitle.attr('title')); // get title attribute value 
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute 
    mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip 
});

CSS：

abbr { 
    position: relative; 
} 
abbr:hover::after { 
    position: absolute; 
    bottom: 100%; 
    left: 100%; 
    display: block; 
    padding: 1em; 
    background: yellow; 
    content: attr(name); 
}

來源

2013-09-15 22:19:32 davewoodhall

abbr標籤的標題可以被樣式化嗎？

回答

相關問題