Дочерний якорь не может удалить текстовое оформление? - PullRequest
Новая
       4

Дочерний якорь не может удалить текстовое оформление?

1 голос
/ 25 февраля 2011

У меня есть глобальная функция javascript, которая .appends() является элементом всплывающей подсказки для любого элемента с атрибутом data-tooltip.

Это все круто, пока я не попытаюсь дать a закрепить 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;
}

ThisВот как вставляется всплывающая подсказка: 

$(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, но он, вероятно, делает что-то совершенно другое

Ответы [ 4 ]

0 голосов
/ 25 февраля 2011

http://jsfiddle.net/CHSmV/

Я не могу заставить его работать без изменения вашего HTML.Если вы можете сделать это, посмотрите мою скрипку.Я добавил дополнительный промежуток вокруг текста без подсказок и добавил классы к обоим промежуткам.Затем я нацелился на соответствующие промежутки с правильными text-decoration.

. Это работало в FF 3.6, IE 7 + 8, Safari 5 и Chrome 9.

0 голосов
/ 25 февраля 2011

Когда я пытаюсь это сделать, 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>
0 голосов
/ 25 февраля 2011

Хорошо, у меня есть одно решение моего собственного вопроса - не используйте элементы <div> внутри тега привязки. Я попытался использовать <span> вместо этого, и теперь он работает правильно

0 голосов
/ 25 февраля 2011

Не изменили ли класс всплывающей подсказки для удаления подчеркивания?Добавьте это к определению класса всплывающей подсказки. 

text-decoration: none;

Если это не сработало, попробуйте использовать это: 

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

UPDATE

Я думаю, что такое поведение может быть вызвано браузерами.Почему бы не обойти это? 

a:hover {text-decoration: none; }
...