Рамка вокруг изображения без явы? @ DeForum.ru

0 Сообщения: 13 Зарегистрирован: 25.07.07

Уважаемые дизайнеры, посоветуйте плиз.

Возможно ли без явы простой css, сделать так, чтобы
при наведении на изображение у него появлялся border(рамка).
Ну и при убирании соответственно исчезал?

Мозгом понимаю что 1-2 строчки скорее всего, но чет не соображу :insane:

Пните плз, в сторону нужной функции или свойства. :glasses:

4 Сообщения: 143 Зарегистрирован: 20.06.06

Код:

Код:

   <style>
img {
   display: block;
   position: relative;
   border: none;
}
a:link, a:visited {
   border: 3px solid #fff;
   display: block;
   float: left;

}
a:hover, a:active {
   border: 3px solid #000;

}
   </style>

3 Сообщения: 36 Зарегистрирован: 12.07.07

не забудь также добавить
<a href="" class="imgstyle"><img src="a.jpg" width="100" height="100" alt=""></a>
и в стиль
a.imgstyle:hover { ……
чтобы у всех остальных ссылок не появлялась рамка

Кира, объясните смысл шаманства с объявлением блоками строчных элементов, плюс к ним рилейтив и флоат, если достаточно просто объявить бордер на ховер? :insane:

4 Сообщения: 143 Зарегистрирован: 20.06.06

karamba, а попробуйте на практике и проверьте кросбраузерность :-)

оффтопик:

давненько с вами не обсуждали одну тему. Даже соскучится успела

Кира, ок, универсально (следующим вопросом будет «как побороть флоат?» ))
Кста, при объявлении флоата отдельно блок объявлять не нужно — элемент приобретает блочные свойства автоматом.
Загадочно для меня выглядит правило имиджа position: relative. Видимо это трик какой-то? Для чего?

оффтопик:

просто вы нечастая гостья. Да и интересных вопросов не задают давно, наверное все стали профи.

4 Сообщения: 143 Зарегистрирован: 20.06.06

karamba, флоат так, к примеру. Конкретной задачи не поставлено. Поэтому показала пример с флоатом - не рамку у картинки нужно делать, а рамку у ссылки :-)

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

ulitin kirill писал(а):

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

А бабы в русских селениях еще есть?

ulitin kirill писал(а):

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

Я им пользуюсь, работает нормально, и нет нагромождения кода.
Это не совсем хак. Прописывается
body{behavior:url(css/csshover.htc);}
В сети файл csshover.htc обычно под этим названием и бродит.

bong13 писал(а):

А бабы в русских селениях еще есть?

Это вы собственно к чему?

0 Сообщения: 13 Зарегистрирован: 25.07.07

спасибо, все работает как надо :glasses:

в моем случае достаточно было только hover'a

ulitin kirill писал(а):

bong13 писал(а):

А бабы в русских селениях еще есть?

Это вы собственно к чему?

К вашему познавательному посту - забыли :beer:

Кира, Слишком много извращений. Можно сделать проще

Код:

a img {border:3px solid #FFF;}
a:hover img {border:3px solid #000;}

И все.

IonDen666, в ИЕ 6 не работает, ховеры — его «больное место»

4 Сообщения: 143 Зарегистрирован: 20.06.06

karamba, угу :-)

karamba, Кира, с одной стороны вы конечно правы, но это только потому что я забыл упомянуть про одну вещь. Чтобы конструкция типа

Код:

a img {border:3px solid #FFF;} 
a:hover img {border:3px solid #000;}

работала в ИЕ 6 для него нужно прописать лишь одну вещь в ксс. А именно оформить стандартную ссылку и ховер. Вот так например:

Код:

a {text-decoration:underline;}
a:hover {text-decoration:none;}

Т.е. чтобы все заработало, общий код будет выглядеть вот так:

Код:

a {text-decoration:underline;}
a:hover {text-decoration:none;}
a img {border:3px solid #FFF;} 
a:hover img {border:3px solid #000;}

4 Сообщения: 143 Зарегистрирован: 20.06.06

IonDen666, да, работает :-)

красиво

IonDen666, век живи — век учись.
:beer:

DeДверь
Логин:
Пароль:
	Автологин