2016-04-25 161 views
-1

我試圖更改標題元素的字體大小。我在google搜索很好的例子,我發現這一個:link如何更改HTML標題字體大小?

但即使標題被顯示灰色提示內,將出現第二個: enter image description here

我的問題是:如何風格這個第二一個工具提示(黃色的一個)通過增加其字體大小?

我的跨度是這樣的:

<span title=${code} ></span> 

回答

2

我有測試你的小提琴,它似乎只發生在FireFox的這個問題。只需顯示1個框(您的內容用CSS編寫)以及懸停時顯示的瀏覽器標準標題屬性。

如果你不關心真正的「title」屬性,你可以用一個解決類似這樣的:http://jsfiddle.net/tDQWN/9078/

只要改變3行代碼:

你的HTML的輸出:

<span title=${code} ></span> 

而且的CSS:內容後:

a[data-title]:hover:after { 
    content: attr(data-title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

我簡單的話,我只是改變了「數據標題」屬性中的「標題」屬性。在這種情況下,瀏覽器不會輸出小標題文本,因爲它不是標準的「標題」屬性。現在你必須製作一個盒子的樣式。

1

[title]:hover:after{ 
 
    content: attr(title); 
 
    background:yellow; 
 
    padding: 5px; 
 
    border-radius:5px; 
 
    border:1px solid; 
 
}
<span title="jayeshshelar.com">Jayesh Shelar</span>