Question

我有一个全局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，但它可能做了一些完全不同的事情

Answer 1

未修改工具提示类以删除下划线工作？将其添加到工具提示的类定义中。

text-decoration: none;

如果这不起作用，请尝试使用：

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

<强>更新

我认为这种行为可能是由浏览器引起的。为什么不解决这个问题？

a:hover {text-decoration: none; }

Answer 2

当我尝试这样做时，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' });
});

HTML：

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

Answer 3

好的我对自己的问题有一个解决方案 - 不要在锚标记内使用<div>个元素。我尝试使用<span>代替它现在正常工作

Answer 4

http://jsfiddle.net/CHSmV/

我无法在不修改HTML的情况下使用它。如果你能做到这一点，请看我的小提琴。我在非工具提示文本周围添加了额外的跨度，并为两个跨度添加了类。然后我使用适当的text-decoration

来定位相关的跨度

这适用于FF 3.6，IE 7 + 8，Safari 5和Chrome 9。

锚的孩子不能删除文字装饰？

4 个答案: