анкеры и регулярные ссылки - стиль

На веб-странице Я строю Я использую якоря для удобной навигации. Моделирование этих якорей в 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? Очевидно, класс «якорь» не очень помогает ...

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

источник

2009-09-21 Kablam

Что именно вы хотите? - Если бы вы могли подвести итоги вашего цвета/эффекта в одном или двух предложениях, это поможет.Например: «В конечном счете, я хочу, чтобы все якоря были красными, но если у них нет href, я хочу, чтобы они были фиолетовыми» - или что угодно :) –

Согласен, неясно, чего вы пытаетесь достичь. Зачем вам нужен бит [href], если у вас есть класс привязки? – Tom

Использование [href] вместо повторной классификации ваших якорей является хорошим (и ясным для меня), но я просто хочу знать, что вы хотите в качестве конечного результата для цветов и стиля ... тогда мы можем написать любой браузер, лучший CSS для работы. –

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

.text 
{ 
    color: #000; 
} 

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

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

источник

2009-09-21 13:08:12

Бинго, это он. Я не видел, как использовать h3 в качестве селектора ... Спасибо :) – Kablam

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

источник

2009-09-21 12:53:07 peirix

Интересная функция, это. К сожалению, это не устраняет эту конкретную проблему, но я узнал что-то новое :) Спасибо! – Kablam

Да, я понял позже, что это было, что вы действительно были после. Но я думал, что позволю остаться в любом случае. Рад, что вам понравилось, хотя (: – peirix

есть 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) */ }

источник

2009-09-21 12:57:35 knittl

Извините, это не делает ничего, кроме селектора .text. – Kablam

Заменить:

<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, как о поддержке нескольких псевдо-классов на одной части селектора)

источник

2009-09-21 13:09:03 Quentin

Я думаю вы пропустили очко на 100% ... он хочет привязки на странице, чтобы разрешить навигацию ... как бы вытащить тег «a»? –

Удивительно, но это действительно работает. Теги h3 с идентификатором могут быть связаны с ... так что это действительно намного чище! Никогда не знал об этом :) – Kablam

В соответствии со спецификацией: http://www.w3.org/TR/html4/struct/links.html#anchors – Quentin

две вещи:

добавление элемента якорного без предоставления идентификатора не облегчит навигацию. Он также менее вероятен. Я думаю, что вы хотите иметь якоря, указывающие на идентификатор 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; 
}

источник

2009-09-21 13:19:21 Anthony

анкеры и регулярные ссылки - стиль

ответ

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