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



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

#1 slaip
slaip
  • Неактивные
  • 15 сообщений
  • Репутация: -2
0

Обновлено 08 июня 2013 - 08:56  Отправлено 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
  • Неактивные
  • 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 191 сообщений
  • Репутация: 206

Отправлено 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 191 сообщений
  • Репутация: 206

Отправлено 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


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография kuztoday
    #3

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография SergiuS85
    #4

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография mkreine
    #5

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #6

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #7

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #8

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография fedornabilkin
    #9

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 7.5 1 тема, 2 сообщения, 1 балл репутации

  • Фотография wp01
    #10

    wp01
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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