якоря и обычные ссылки - стиль - PullRequest
Новая
       3

якоря и обычные ссылки - стиль

1 голос
/ 21 сентября 2009

На веб-странице, которую я создаю, я использую якоря для удобной навигации. Оформление этих якорей в IE6 доставляет мне некоторые неприятности. 

<div class="text">
    <h3><a class="anchor" name="custom_name">Title</a></h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

С этим CSS: 

.text 
{
    color: #000;
}

.text a[href] 
{
    color: #ea2026;  //red
}

.anchor, .anchor:hover
{
    color: #a9a18c;  //gray
    text-decoration: none;
}

В FF и IE7 + проблем нет. Но в IE6 ссылки белые (как определено в селекторе тела), потому что у него проблемы с .text a [href]. Когда я удаляю [href], якоря становятся красными во всех браузерах (естественно). В Firefox наведение все еще дает эффект, но не в IE.

Есть ли способ стилизовать якоря иначе, чем обычные ссылки в FF и IE6? Очевидно, что класс "якорь" не очень помогает ...

Редактировать - Извините, это то, что я хочу:
Все обычные ссылки должны быть красными (ссылки). Все анкеры должны быть серого цвета h3. При наведении курсора на обычную ссылку это подчеркивается, и наведение курсора на один из якорей практически ничего не должно изменить.

Ответы [ 5 ]

2 голосов
/ 21 сентября 2009

Заменить: 

<h3><a class="anchor" name="custom_name">Title</a></h3>

С: 

<h3 class="fragment" id="custom_name">Title</h3>

Он короче и не перепутан со стилями, предназначенными для ссылок.

(В качестве альтернативы посмотрите на a:link:hover, a:visited:hover {}, но я не знаю, как IE относится к поддержке нескольких псевдоклассов в одной части селектора)

1 голос
/ 21 сентября 2009

Бросьте класс "якоря" ... Я думаю, что вы хотите это: 

.text 
{
    color: #000;
}

.text a
{
    color: #ea2026; /*red*/
}

.text h3 a, .text h3 a:hover
{
    color: #a9a18c; /*gray*/
    text-decoration: none;
}
0 голосов
/ 21 сентября 2009

Две вещи:

Добавление элемента привязки без указания идентификатора не облегчит навигацию. Это также менее вероятно, будет действительным. Я думаю, что вы хотите, чтобы якоря указывали на идентификатор h3. Что-то вроде: 

<div class="linktotext">
<a href="#title1">Title</a>
</div>
<div class="text">
    <h3 id="title1">Title</h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

Теперь якорь в первой части ссылается на идентификатор во второй части.

Во-вторых,

Чтобы исправить вашу конкретную проблему, вы можете просто указать CSS для a элементов внутри h3 элементов, например: 

.text 
{
    color: #000;
}

.text a
{
    color: #ea2026;  //red
}

.text h3 a, .text h3 a:hover
{
    color: #a9a18c;  //gray
    text-decoration: none;
}
0 голосов
/ 21 сентября 2009

есть a:link для этого: 

a { /* styles for all anchors */ }
a:link, a:visited { /* styles only for links */ }
a:hover { /* styles that should only apply to hovered links (not anchors) */ }
0 голосов
/ 21 сентября 2009

Попробуйте использовать .text > a, чтобы перейти ко второй ссылке. Он будет поражать только прямых детей класса .text.

...