X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать, чтобы при наведении курсора линии подсвечивались
alekseisnegin
alekseisnegin
Topic Starter сообщение 3.6.2013, 10:23; Ответить: alekseisnegin
Сообщение #1


[img]http://i48.fastpic.ru/big/2013/0603/36/333099f6df3323d06e6a40ed24998936.jpg[/img]
Есть картинки (они находятся в блоке), каждая из них обведена линией, на картинки есть ссылки,
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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 3.6.2013, 11:13; Ответить: isvetlichniy
Сообщение #2


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


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

а чтобы линии подсвечивались, используй псевдокласс hover и с его помощью например измени границы области в которой выводится картинка
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
armavir_mw
armavir_mw
сообщение 6.6.2013, 11:29; Ответить: armavir_mw
Сообщение #3


<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;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex21ks
alex21ks
сообщение 6.6.2013, 12:39; Ответить: alex21ks
Сообщение #4


0 он и в Африке 0, неважно с пикселями или без.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 6.6.2013, 22:17; Ответить: fedornabilkin
Сообщение #5


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

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

то в современных браузерах изменение при наведении будет происходить плавно, а не сразу. CSS3 вроде
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 6.6.2013, 23:16; Ответить: isvetlichniy
Сообщение #6


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


молодец, что читаешь документацию по CSS. хотя это свойство используется крайне редко
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 7.6.2013, 0:05; Ответить: fedornabilkin
Сообщение #7


Может и редко, но мне кажется все намного мягче выглядит.
Я очень даже использую сейчас, потому что раньше подобные фишки делали яваскриптом или вообще не делали.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
armavir_mw
armavir_mw
сообщение 8.6.2013, 9:56; Ответить: armavir_mw
Сообщение #8


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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1120 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2291 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3917 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3644 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1934 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:57
Дизайн