Span в теге с другим стилем - PullRequest
Новая
       29

Span в теге с другим стилем

3 голосов
/ 11 октября 2011

В моем HTML-коде у меня есть тег a с унаследованным тегом span.Теперь у меня вопрос, как я могу добиться, чтобы текст в элементе ссылки был подчеркнут при наведении, а элемент span - нет?

HTML: 

<a class="tooltip" href="#">
  Link, should be underlined on hover.
  <span class="custom info">Span, shouldn't be underlined on hover.</span>
</a>

CSS: 

/* General settings */

a { color: black; text-decoration: none }
a:visited { color: black; }
a:hover { color: #1af; text-decoration: underline }

/* End */

.tooltip {
    position: relative;
}

.tooltip span {
    display:none;
    position: absolute;
    white-space:nowrap;
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 5px 5px rgba(0, 0,0, 0.1); 
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    margin-left: 0; 
    z-index: 1;
    text-decoration: none;
}

a.tooltip:hover span {
    display:block;
    text-decoration: none;
}

Ответы [ 2 ]

2 голосов
/ 11 октября 2011

Вы можете добавить другой диапазон (встроенную клейкую ленту HTML AKA) и переместить стиль :hover в следующее значение: 

<a class="tooltip" href="#">
    <span class="hack">Link, should be underlined on hover.</span>
    <span class="custom info">Span, shouldn't be underlined on hover.</span>
</a>

И: 

a:hover span.hack { color: #1af; text-decoration: underline }
/*...*/
.tooltip span.info {
    /*...*/
    /* Remove text-decoration */
}
a.tooltip:hover span {
    display:block;
}

Демонстрация: http://jsfiddle.net/ambiguous/UWgcc/1/

Вы, вероятно, захотите переименовать класс hack, я был просто честен с этим.

Если вы хотите только возиться со своими .tooltip ссылками, тогда вы могли быдобавьте это к вышесказанному: 

a:hover { color: #1af; text-decoration: underline }
a.tooltip:hover { color: #000; text-decoration: none }

Демо: http://jsfiddle.net/ambiguous/UWgcc/2/

1 голос
/ 11 октября 2011

гораздо более простой обходной путь 

a:hover { color: #1af; border-bottom:1px solid #f0f; }

/* ...snip... */

a.tooltip:hover span {
  display:block;
  border-bottom:0;
}

удаляет текстовое оформление и заменяет его на свойство border-bottom.

Демо: http://jsfiddle.net/UBj76/

...