Может ли это работать в CSS?

Question

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

.properties #content table th a {
    color: #fff;
    text-decoration: none;
}

.properties #content table th a:hover {
    text-decoration: underline;
}

.properties #content table th a:hover span.sort-direction {
    text-decoration: none;
}

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

Каким будет обходной путь?Я хочу, чтобы промежуток тоже был ссылкой.Может быть, комбинация position: relative на якоре и position: absolute на пролете?

Answer 1

Я помещаю узел привязки в его собственный диапазон, а затем устанавливаю text-decoration: underline на нем.

.properties #content table th a:hover span.header {
    text-decoration: underline;
}

Answer 2

Это интересная причуда.Поскольку ширина элемента a включает в себя span, подчеркивание пересекает всю ссылку a.Значение подчеркивания none не "исключает" это подчеркивание.Вы можете получить желаемый эффект следующим образом (при условии, что ваш фон белый):

.properties #content table th a:hover {
    border-bottom: 1px solid black;
}

.properties #content table th a:hover span.sort-direction {
    border-bottom: 1px solid white;
}

Если у вас нет твердого фона, это может выглядеть не идеально.Возможно, вам лучше добавить дополнительный элемент span.

Answer 3

Так как вы не предоставили HTML, я сделал упрощенный пример:

CSS

.properties a {
 color: #fff;
 text-decoration: none;
}

.properties a:hover span.hovered {
 text-decoration: underline;
}

HTML

<div class="properties">
 <a href="#"><span class="hovered">Hello</span> Test</a>
</div>