錨的小孩不能刪除文字裝飾？

我有一個全球性的javascript函數.appends()工具提示元素與data-tooltip屬性的任何元素。錨的小孩不能刪除文字裝飾？

這是所有酷，直到我試圖給一個a nchor的data-tooltip屬性，這似乎打破了CSS，因爲我似乎無法刪除的工具提示text-decoration規則。

我該如何刪除text-decoration對錨的孩子？

下劃線顯然是從父定位點繼承的，因爲它具有默認錨點顏色下劃線，但工具提示文本的color爲橙色。

請參閱http://img.ly/35kc瞭解我所談論的內容。

更新

這裏是我的工具提示CSS，按要求

/*TOOLTIPS*/ 

.tooltip_placeholder { 
    position: relative; 
    width: 0px; 
    height: 0px; 
    white-space:nowrap; 
    display: inline; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip_boundary { 
    position: absolute; 
    width: 300px; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip_border { 
    z-index: 100; 
    background: url(/sales/global/images/tooltip_arrow.png) no-repeat; 
    padding-left: 35px; /*left offset*/ 
    background-position: 16px 0px; 
    float: left; 
    z-index: 100; 
    text-decoration: none; 
} 

.tooltip { 
    padding: 8px; 
    color: #A97D35; 
    background: #FBF98E; 
    -moz-border-radius: 0px 8px 8px 8px; 
    border-radius: 0px 8px 8px 8px; 
    border: 6px solid #F9E98E; 
    font-size: 12px; 
    text-transform: none; 
    z-index: 100; 
    text-decoration: none; 
}

這是一個提示是如何投入：

$(element).append('<div class="tooltip_placeholder"><div class="tooltip_boundary"><div class="tooltip_border" style="display: none;"><div class="tooltip">'+$(element).attr('data-tooltip')+'</div></div></div></div>')

更新2

@Guffa善意地撥弄了這個http://jsfiddle.net/TxRmk/ 這個問題似乎是瀏覽器特定的，因爲我可以讓它在FF中工作，而不是Safari或Chrome。沒有檢查IE，但它可能做了完全不同的事情

來源

2011-02-24 Zak Henry

你可以發佈你的CSS？在黑暗中拍攝，否則...... – TNC 2011-02-24 22:09:32

'a.iHasAToolTip .toolTipElement {text-decoration：none}'？ – thirtydot 2011-02-24 22:10:59

發佈您的HTML/CSS。這聽起來像是CSS特性的問題。像我之前評論中的選擇器可能已經足夠好了。 – thirtydot 2011-02-24 22:13:33

http://jsfiddle.net/CHSmV/

我不可能得到它，而無需修改您的HTML工作。如果你能做到這一點，請看我的小提琴。我在非工具提示文本週圍添加了一個額外的跨度，並向兩個跨度添加了類。然後我用適當的text-decoration來定位相關的跨度。

這工作在FF 3.6，IE 7 + 8，Safari 5和Chrome 9.

來源

2011-02-25 16:40:50 Jeff

未修改工具提示類以刪除下劃線工作？將此添加到工具提示的類定義中。

text-decoration: none;

如果沒有工作，請嘗試使用此：

$(function(){ 
    $('[data-tooltip]').children().css('text-decoration','none'); 
});

UPDATE

我認爲這種行爲可以通過瀏覽器造成的。爲什麼不做這個解決方法？

a:hover {text-decoration: none; }

來源

2011-02-24 22:09:53 SadullahCeran

是的，這是我第一次嘗試。也嘗試過所有的工具提示元素。（Tooltip由4個嵌套div組成） – 2011-02-24 22:11:55

如果你提供div結構的工具提示和css類，它會更乾淨。 – SadullahCeran 2011-02-24 22:14:31

@Zak Henry你有一個'！important'的'text-decoration'聲明可以覆蓋你的css的某個地方嗎？ – Damp 2011-02-24 22:20:24

當我嘗試的是，text-decoration是不能繼承：

http://jsfiddle.net/TxRmk/

CSS：

a { position: relative; } 
a span { display: none; position: absolute; left: 10px; top 20px; padding: 5px; border: 1px solid #999; background: #ccc; color: #fff; }

的Javascript：

$('a').hover(function(){ 
    $('span', this).css({ display: 'block' }) 
}, function(){ 
    $('span', this).css({ display: 'none' }); 
});

HTM L：

<a href="#">Info<span>Information</span></a>

來源

2011-02-24 22:15:30 Guffa

嗯它是我的（薩法菲5.0.3）。我會測試其他瀏覽器 – 2011-02-24 22:18:06

@Guffa它在Firefox中很開心。在IE/Safari/Chrome中Safari或Chrome – 2011-02-24 22:19:54

[請選擇此項]（http://jsfiddle.net/TxRmk/1/）則不然。來自'a'標籤的'text-decoration'不能被消除：o – thirtydot 2011-02-24 22:26:08

好的我對自己的問題有一個解決方案 - 不要在錨標記中使用<div>元素。我嘗試使用<span>而不是和它工作正常現在

來源

2011-02-24 22:34:27

劃痕。它適用於Firefox，Safari。但不是Chrome。 :( – 2011-02-24 22:51:15

錨的小孩不能刪除文字裝飾？

回答

相關問題