使用jQuery與CSS3設置屬性名稱並行：我使用這個後

喜來設置元素title屬性：使用jQuery與CSS3設置屬性名稱並行：我使用這個後

$('.upgradeTables thead tr td:gt(1)').attr('title', 'Upgrade To');

然後我用CSS3來做到這一點：

.upgradeTables thead tr td:hover:before 
{ 
    background: #000; 
    content: attr(title); 
    color: #f7f7f7; 
    opacity: 0.95; 
    display: block; 
    font-weight: bold; 
    position: relative; 
    text-align: center; 
    top: 0px; 
    padding: 5px; 
    -webkit-box-shadow: 1px 1px 10px 0.5px #333 !important; 
    -moz-box-shadow: 1px 1px 10px 0.5px #333 !important; 
    box-shadow: 1px 1px 10px 0.5px #333 !important; 
}

我的問題是，當我將鼠標懸停在元素上時，出現了很好的CSS標題，因爲我希望它們可以沿着TD移動，並且「升級到」出現在每個元素上方。

的問題是，當我將鼠標懸停在第一個，我得到的CSS標題也是灰色的默認瀏覽器的標題出現，並保持明顯的，因爲我給其他TD的移動。我如何隱藏彈出的默認標題，但仍然保持CSS：懸停後標題顯示後？

來源

2011-07-12 benhowdle89

在什麼瀏覽器，你測試它？在Firefox中，我認爲沒關係http://jsfiddle.net/MKTbn/ – Sotiris

Chrome。沒有在別處測試過！ – benhowdle89

不幸的是CSS禁用工具提示中沒有簡單的CSS的方法。我建議在你的例子中使用title屬性並不是真正的語義（標題屬性是爲了解釋鏈接背後的內容）。

將使用html5's data attributes，這將使你的代碼看起來像......

$('.upgradeTables thead tr td:gt(1)').attr('data-tooltip', 'Upgrade To');

和你的CSS聲明中的替代...

content: attr(data-tooltip);

來源

2011-07-12 15:52:31 Duopixel

只需注意，data-*屬性在HTML5之前的規範中無效。但是如果用例假定HTML5，那麼可以使用data- *屬性來代替標題。 – spliter

它會工作，它只是不會驗證。我認爲如果OP使用這樣的高級CSS，那麼他可能使用html5文檔類型。 – Duopixel

好點，@Duopixel。 – spliter

的問題是，有沒有辦法以防止瀏覽器顯示title屬性的工具提示。所以，我想說，你沒有機會用你目前的方法來解決這個問題。

如果不是設置title屬性，而只是在document.ready()上插入工具提示？這將使你more predictable code。只需按照您需要的方式定位工具提示，我認爲它應該可以解決您的問題。

jsFiddle snippet

來源

2011-07-12 21:32:45 spliter

使用jQuery與CSS3設置屬性名稱並行：我使用這個後

回答

相關問題