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



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

#1

Поделиться сообщением #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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Увеличение фото при наведении курсора.
  2. Пауза при наведении на баннер
  3. Убрать подсказку, всплывающую при наведении на ссылки категорий WordPress!
  4. Всплывающие изображения.
  5. Как сделать анимирование графической ссылки при наведении курсора?

#2

Поделиться сообщением #2



isvetlichniy

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

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

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


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

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

#3

Поделиться сообщением #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

Поделиться сообщением #4



alexks24kz

alexks24kz
  • Неактивные
  • 65 сообщений
  • Репутация: 10

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

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


  • 0

#5

Поделиться сообщением #5



fedornabilkin

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

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

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

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


#6

Поделиться сообщением #6



isvetlichniy

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

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

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


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

#7

Поделиться сообщением #7



fedornabilkin

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

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

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


#8

Поделиться сообщением #8



armavir

armavir
  • Неактивные
  • 8 сообщений
  • Репутация: 0

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

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

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

robot

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


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