VPF::a:hover span CSS - Форум программистов

Alex_B

Дата 30.7.2007, 10:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Вот так определаю ссылку:

Код


<a href="#"><span>ссылка</span></a>

При наведении на ссылку над ней должна появляться полоса, для этого в CSS делаю вот так:

Код


a:hover span{
    border-top:6px solid #F46F00;
}

Работает в FF и Opera, но не работает в IE.

Как сделать что бы работало в IE?

Спасибо

Это сообщение отредактировал(а) Alex_B - 30.7.2007, 10:50

japanes

Дата 30.7.2007, 10:48 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Код


a:hover{
    border-top:6px solid #F46F00;
    visibility:hidden;
}

Это сообщение отредактировал(а) japanes - 30.7.2007, 10:49

Alex_B

Дата 30.7.2007, 10:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

japanes, я не совсем полно осветил вопрос.

Для ссылок стоит вот еще:

Код


a{
    display: block;
}

Если сделать вот так:

Код


a:hover{
    display: block;
    border-top:6px solid #F46F00;
}

То полоса появляется не только над надписью ссылки, а еще и растягивается + сама ссылки смещается вниз на толщину линии (неприятный эфект дрыганья ссылок)

japanes

Дата 30.7.2007, 11:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

ну тогда javascript smile

Код


<script>
function cmnMatch_class( eOn, sClass_name ){
    return ( sClass_name && eOn.className && eOn.className.length && eOn.className.match( new RegExp("(^|\\s+)(" + sClass_name +")($|\\s+)") ) );
}
function cmnSet_class( eOn, sClass_name, sInstead ){
    if( eOn ){
        sClass_name = ( sClass_name.length ) ? sClass_name.replace( /(^\s+|\s+$)/, "" ) : "";
        if( eOn.className.length ){
            var sOld = sClass_name;
            if( sInstead && sInstead.length ){
                sInstead = sInstead.replace( /\s+(\S)/g, "|$1" );
                if( sOld ){
                    sOld += "|";
                }
                sOld += sInstead;
            }
            eOn.className = eOn.className.replace( new RegExp("(^|\\s+)(" + sOld +")($|\\s+)", "g"), "$1" );
        }
        eOn.className += ( eOn.className.length && sClass_name ? " " : "" ) + sClass_name;
    }
}
function addDelBorder(elem){
if(cmnMatch_class(elem, 'no_border')){
cmnSet_class(elem, 'top_border', 'no_border');
}
else{
cmnSet_class(elem, 'no_border', 'top_border');
}
}
</script>
<style>
span.no_border{
border:none;
}
span.top_border{
border-top:6px solid #F46F00;
}
</style>

Добавлено через 6 минут и 29 секунд
забыл

Код


<span onclick="addDelBorder(this)">span content</span>

Alex_B

Дата 30.7.2007, 11:10 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Спасибо!

А средствами CSS вообще не решить?

japanes

Дата 30.7.2007, 11:13 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Alex_B, хз. возможно... надо поковыряться

Alex_B

Дата 30.7.2007, 11:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Поменял местами <span> и <a>

Код


<span><a href="#">ссылка</a></span>

Ну и в CSS тоже все наоборот:

Код


span{
    display: block;
}
a:hover {
    border-top:6px solid #F46F00;
}

Работает как надо smile

sssergius

Дата 30.7.2007, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет

Возможно, проблема уже решена, но хочу предложить свой вариант.

Код


<a href="">ссылка</a>

Код


a {border-top:solid 1px #fff;float:left}
a:hover {border-top:solid 1px #ccc}

таким образом, span можно вообще не использовать.

Это сообщение отредактировал(а) sssergius - 30.7.2007, 19:23

Mymik

Дата 30.7.2007, 20:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

sssergius, проблема была в том, что ему нужно только часть текста подводить, а не весь текст.

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

sssergius

Дата 30.7.2007, 20:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет

Код


<p>текст <a href=""><span>ссылка</span> продолжение ссылки</a> текст</p>

Код


a {border-top:solid 1px #fff}
a span{border-top:solid 1px #fff}
a:hover span{border-top:solid 1px #ccc}

теперь можно подводить часть ссылки и ссылка может находиться в любом тексте

Mymik

Дата 31.7.2007, 08:37 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

sssergius, взгляни сначала на код топик-стартера, а потом на свой и найди 10 отличий :о). А потом еще посмотри свой код в IE. Как и говорил топикстартер

Цитата(Alex_B @ 30.7.2007, 10:31

)

Работает в FF и Opera, но не работает в IE.

Проверено на собственном опыте :о)

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

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

sssergius

Дата 31.7.2007, 21:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет

Проблему оценил. Можно попробовать такой вариант. У меня работает в IE 6

Код


a, a span{border-top:solid 6px #fff;float:left;cursor:pointer}
a:hover span{border-top:solid 6px #ccc}

Код


<a href="#"><span>ссылка</span></a>

float:left - именно и для a и для span
cursor:pointer - поскольку указатель ссылки пропадает в IE

webmolot

Дата 20.8.2008, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 10.4.2008

Репутация: нет
Всего: нет

напишите вот эту строчку в стилях страницы и все будет работать... глюки глюками исправляются smile

a:hover{text-indent: 0}

SelenIT

Дата 20.8.2008, 15:27 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Насколько я понимаю, это древнее родовое проклятие племени Синих Ослов из Редмонда под названием "hasLayout". А вот что text-indent на это влияет, честно говоря, слышу впервые.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »