Перейти к содержимому

Сервис обмена электронных валют


Как сделать, чтобы при наведении курсора линии подсвечивались

#1 slaip

slaip
  • Пользователь
  • 15 сообщений
  • Репутация: -2
0

Отправлено 03 Июнь 2013 - 09:23

Изображение
Есть картинки (они находятся в блоке), каждая из них обведена линией, на картинки есть ссылки,
1) как сделать, чтобы при наведении курсора линии подсвечивались,
2) как добавить к картинкам класс и вывести его в СSS файле.

Код одной из картинок

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="/sites/default/files/pictures/a210.jpg"><img alt="" src="/sites/default/files/pictures/a210a.jpg" style="width: 61px; height: 61px; border: 1px solid #C6C6C6; padding: 2px; margin:0 6px 6px 0;"></a>

 

 

  • 0

#2 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 03 Июнь 2013 - 10:13

как добавить к картинкам класс и вывести его в СSS файле.


допустим у тебя картинка <img src="somepath_to_image" class="image_style">
вот класс и будет служить для задания стилей, в css будешь писать
.image_style {
тут стили
}

а чтобы линии подсвечивались, используй псевдокласс hover и с его помощью например измени границы области в которой выводится картинка
  • 0

#3 armavir

armavir
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 06 Июнь 2013 - 10:29

<style>
img.imgline{width: 61px; height: 61px; padding: 2px; margin:0px 6px 6px 0px; border: 1px solid #C6C6C6;}
img:hover.imgline{width: 61px; height: 61px; padding: 2px; margin:0px 6px 6px 0px;border:1px solid red;}
</style>
<a href=""><img class="imgline" src="/img/.......phg"></a>

вот это margin:0 6px 6px 0; лучше указывай везде точно по пикселям margin:0px 6px 6px 0px;
  • 0

#4 alexks24kz

alexks24kz
  • Пользователь
  • 65 сообщений
  • Репутация: 10

Отправлено 06 Июнь 2013 - 11:39

0 он и в Африке 0, неважно с пикселями или без.


  • 0

#5 fedornabilkin

fedornabilkin
  • Пользователь
  • 696 сообщений
  • Репутация: 91

Отправлено 06 Июнь 2013 - 21:17

а чтобы линии подсвечивались, используй псевдокласс hover и с его помощью например измени границы области в которой выводится картинка

А если в основное правило добавить
transition: .6s; -webkit-transition: .6s;
то в современных браузерах изменение при наведении будет происходить плавно, а не сразу. CSS3 вроде
  • 0
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


#6 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 06 Июнь 2013 - 22:16

А если в основное правило добавить transition: .6s; -webkit-transition: .6s;


молодец, что читаешь документацию по CSS. хотя это свойство используется крайне редко
  • 0

#7 fedornabilkin

fedornabilkin
  • Пользователь
  • 696 сообщений
  • Репутация: 91

Отправлено 06 Июнь 2013 - 23:05

Может и редко, но мне кажется все намного мягче выглядит.
Я очень даже использую сейчас, потому что раньше подобные фишки делали яваскриптом или вообще не делали.
  • 0
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


#8 armavir

armavir
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 08 Июнь 2013 - 08:56

0 он и в Африке 0, неважно с пикселями или без.

ммммм.. да ты прав, но у меня что то помню было я не указал 0px а поставил просто 0 и у меня что то неотображалось нормально
непомню что я делал.. может глюк какой был незнаю.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru