Создание проблемы форматирования всплывающей подсказки CSS с подчеркиванием в теге - PullRequest
Новая
       1

Создание проблемы форматирования всплывающей подсказки CSS с подчеркиванием в теге

3 голосов
/ 01 июля 2011

Я пытаюсь создать чистую подсказку CSS. У меня есть тестовый код здесь: http://jsfiddle.net/RBdn4/

Единственная проблема с этим заключается в том, что в Chrome текст подчеркивается на всплывающей подсказке, несмотря на наличие строки text-decoration: none; в CSS.

Любые предложения о том, как это остановить? Ссылка должна быть подчеркнута, но текст .tooltip не должен.

Ответы [ 3 ]

3 голосов
/ 01 июля 2011

Chrome применяет ссылку text-decoration к <div>, поскольку она является дочерней по отношению к <a>.

Добавьте элемент-обертку вокруг <a> и сделайте всплывающую подсказку <div> родным братом вместо дочернего элемента <a>. Показывать всплывающую подсказку, когда оболочкой является :hover ed.

О, и сделайте так, чтобы CSS имел смысл!

HTML 

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS 

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

Демо: http://jsfiddle.net/mattball/u66GT/

0 голосов
/ 01 июля 2011

Мне не удалось предотвратить подчеркивание в Chrome, пока элементы были вложены, но я могу решить эту проблему, сделав их братьями и сестрами.

Просто удалите <div> изнутри <a> и поместите его рядом с ним, например, так: 

<a href="#">this is text</a>
<div class="tooltip"> this is a tooltip</div>

и используйте селектор CSS + (соседний брат) для выбора всплывающей подсказки, а не дочернего селектора. 

.tooltip{
    display: none;
}

a:hover+.tooltip{
    color: #000000;
    display: block;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

Единственное изменение CSS от вашего оригинала - это изменение пробела на знак плюс.

Обратите внимание, что селектор + не работает в IE6.Надеюсь, вы не планируете поддерживать этот устаревший браузер, правда?

0 голосов
/ 01 июля 2011

Fix'd . Вы не можете переопределить text-decoration от ребенка. Кроме того, не ставьте <div> с <a> с, как указывает Мэтт Болл .

...