Флаги с контуром на границе

Привет, у меня есть 3 флага (итальянский, немецкий, английский) с целью изменения языка для всего сайта в будущем. Как я могу создать границу с эффектом зависания, который мог бы работать с IE?Флаги с контуром на границе

это CCS

.miniflags { 
    float:right 
    margin : 5px 20px; 
    padding-right:10px; 
}

и здесь HTML

<div id="bandiere"> 
    <a><img src="ita.png" class="miniflags" /></a> 
    <a><img src="ger.png" class="miniflags" /></a> 
    <a><img src="eng.png" class="miniflags" /></a> 
</div>

Thanx за помощью

Alex

источник

2010-05-30 Alpan67

никакого отношения к ниже мой комментарий на: focus и: hover, использование флагов для языка - плохая идея. Австрийские и люксембургские люди не являются немецкими, швейцарское меньшинство, говорящее на итальянском языке, не является итальянским и, очевидно, гражданами США, австралийцами ... и говорит по-английски. Вам лучше написать «italiano - deutsch - english» (с правильными атрибутами lang и hreflang) и поместить его где-нибудь в свой заголовок. Это менее визуально, но люди привыкли к этому. Не существует такого понятия, как решение для языков, грустная вещь, поэтому существует множество решений, но флаги далеко не самые лучшие. – FelipeAls

добавить

.miniflags img:hover { 
    border: 1px solid #000; 
}

или

.miniflags a:hover { 
    border: 1px solid #000; 
}

к вашему CSS

я считаю, что второй будет работать лучше (а: зависать)

источник

2010-05-30 14:20:56 Meta

~~Если применить miniflags класс к <a> вместо этого, :hover Псевдоселектор будет работать.~~

miniflags класс вряд ли необходимо. Просто помните, что :hover работает только для ссылок в более старых версиях IE, поэтому вам нужно будет применить их к тегам <a> вместо <img>.

<div id="bandiere"> 
    <a><img src="ita.png" /></a> 
    <a><img src="ger.png" /></a> 
    <a><img src="eng.png" /></a> 
</div> 

<style type="text/css"> 
    #bandiere img { 
     float:right 
     margin : 5px 20px; 
     padding-right:10px; 
    } 

    #bandiere a:hover, #bandiere a:focus { 
     border: 1px solid red; 
    } 
</style>

источник

2010-05-30 14:18:08 Matchu

Thanx очень помогает и легко! – Alpan67

Первая версия работает с классом .miniflags; последняя версия без класса перемещает все DIV id = bandiere – Alpan67

Ahh. Если '.miniflags' отображается в других местах, вам нужно будет его повторно применить. Но правило '#bandiere a: hover' должно стоять, если вам не нужно применять его к * ссылкам * вне этого конкретного div. – Matchu

IE (до 6 IIRC) позволяет допускать ссылки. Таким образом, вы должны добавить :hover к a не к изображению. Для этого необходимо, чтобы <a> имел атрибут href.

источник

2010-05-30 14:19:37 Marian

Флаги с контуром на границе

ответ

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