Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > a:hover span CSS

Автор: Alex_B 30.7.2007, 10:31

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

Код


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

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

Код


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

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

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

Спасибо

Автор: japanes 30.7.2007, 10:48

Код


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

Автор: Alex_B 30.7.2007, 10:54

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

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

Код


a{
    display: block;
}

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

Код


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

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

Автор: japanes 30.7.2007, 11:00

ну тогда 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

Спасибо!

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

Автор: japanes 30.7.2007, 11:13

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

Автор: Alex_B 30.7.2007, 11:32

Поменял местами <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

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

Код


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

Код


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

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

Автор: Mymik 30.7.2007, 20:08

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

Автор: sssergius 30.7.2007, 20:57

Код


<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

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

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

)

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

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

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

Автор: sssergius 31.7.2007, 21:35

Проблему оценил. Можно попробовать такой вариант. У меня работает в 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

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

a:hover{text-indent: 0}

Автор: SelenIT 20.8.2008, 15:27

Насколько я понимаю, это древнее родовое проклятие племени Синих Ослов из Редмонда под названием http://habrahabr.ru/blogs/webdev/31236/. А вот что text-indent на это влияет, честно говоря, слышу впервые.