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



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

#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 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 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
  • Модератор
  • 1 082 сообщений
  • Репутация: 165

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

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

А если в основное правило добавить
transition: .6s; -webkit-transition: .6s;
то в современных браузерах изменение при наведении будет происходить плавно, а не сразу. CSS3 вроде
  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#6 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

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

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


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

#7 fedornabilkin

fedornabilkin
  • Модератор
  • 1 082 сообщений
  • Репутация: 165

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

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

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#8 armavir

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

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

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

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

robot

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

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