CSS на якорных тегах

Если я следующее:CSS на якорных тегах

<div class="linkSet"><a href="#" class="main_link">link one a</a><a href="#" class="sub_link">link one b</a></div>

Как я установить CSS, так что если я парить над первой, она меняет цвет фона для обоих тегов привязки?

источник

2010-10-01 oshirowanen

.main_link:hover, 
.main_link:hover + .sub_link { 
    background-color: red; 
}

Однако следующее:

<a> 
    <span class="main">...</span> 
    <span class="sub">...</span> 
</a>

Даст вам:

Лучше структуры (две ссылки собираются в одном месте, как правило, плохой форме, поскольку существует множество взаимодействий (табулируя, устройства чтения с экрана и т. д.), где они рассматриваются как отдельные ссылки, даже если вы их стиль, чтобы они этого не делали)
Улучшенная поддержка (Немного старые версии MSIE не поддерживает +)
Имея первый цвет изменений ссылки, когда вторая ссылка наведена (+ работает только для следующего, нет предыдущего).

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

источник

2010-10-01 15:45:34 Quentin

Ooooh, nice! В каких браузерах это работает/не работает? –

Старые версии IE. Я ** думаю ** поддержка смежного селектора sibling была добавлена в IE7, но я бы не поклялся ему. – Quentin

Я не могу использовать эту технику, потому что это означает, что обе ссылки в конечном итоге указывают на одно и то же место. На моей странице у меня есть 2 ссылки на строку, 1 ссылка - добавить что-то в базу данных, а другая - удалить что-то из базы данных, как для одного и того же элемента, связанного с строкой, в которой находятся пары ссылок. – oshirowanen

a.main_link:hover, a.sub_link:hover { 
    background-color: red; 
}

источник

2010-10-01 15:45:58 kafuchau

Неужели это не сработает? Это превратило бы одного из них в красный цвет, когда вы наведете его на себя. – chigley

@chigley, Хороший звонок. Виноват. – kafuchau

Если у вас есть

<a href="first.html">Link Part A</a> <a href="second.html">Part B</a>

Этот CSS будет выделить как при «Link Часть А» зависли, и только второй, когда «Часть B» наведен.

a:hover, a:hover + a { 
    background-color: #fff0f0; 
}

По существу же, как и Дэвид, но без использования классов - есть те же самые проблемы с более старой поддержкой IE соседнего селектора родственного.

источник

2010-10-01 16:08:05

CSS на якорных тегах

ответ

Смежные вопросы