Верстка Hover

@sashok89 · Регистрация: 04.08.2012

Студворк — интернет-сервис помощи студентам

Добрый день уважаемые форумчане!!
При верстке возникла проблема((( Вот как должно быть:

при наведение каждый круг и предмет в нем должны менять цвет(
пытался сделать:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="circle">
<img src="photo" alt="" />
<p>Interface Design</p>
</div>
<div class="slick">
<img src="photo" alt="" />
<p>Motion Graphic</p>
</div>
<div class="photo">
<img src="photo" alt="" />
<p>Photography</p>
</div>
<div class="bigBrush">
<img src="photo" alt="" />
<p>Illustration</p>
</div>

Но вот не могу понять как сделать, что бы при наведении менялась картинка( Добавлять ее сразу через css или что(
Кто, что подскажет!

@i_m_root · 02.12.2013, 11:25

А эти круги ты картинками или блоком написал?

@sashok89 · 02.12.2013, 11:31 **[ТС]**

Я думаю что лучше их в css нарисовать! но не знаю как правильно сделать

CSS
1
2
3
4
5
6
7
8
#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

@i_m_root · 02.12.2013, 11:33

картинку делаешь фоном, допустим:
#div_krug {

}

@sashok89 · 02.12.2013, 11:40 **[ТС]**

Все равно не могу понять! как видно на изображении, что я отправил картинка и текст под ней должны быть ссылкой. Как это реализовать вообще не имею представления(

@i_m_root · 02.12.2013, 11:52

картинку делаешь фоном, допустим:

CSS
1
2
3
4
5
6
#div_krug {
background-image: ('Адрес к обычной картинки');
background- color:  (xxx);
background-position: center center; /*  Положение фона именно два раза, т.к. положение по вертикали и горизонтали*/
background-repeat: no-repeat; /* Отменяем повторение фона */
}

CSS
1
2
3
4
5
6
7
#div_krug:hover {
background-image: ('Адрес к hover картинки');
background- color:  (xxx);
background-position: center center; /*  Положение фона именно два раза, т.к. положение по вертикали и горизонтали*/
background-repeat: no-repeat; /* Отменяем повторение фона */
transition: background-image 0.5s ease; // собственно это вроде уже ЦСС3, 
}

почитай про transition отдельно, в сети найдешь много чего, мог где то с синтаксисом ошибится, по ходу дела проверишь и откорректируешь сам

Добавлено через 4 минуты
эту картинку и текст помещаешь в один блок, а этот объединяющий блок сделаешь ссылкой, делитантно, но будет работать тогда изменения цвета будешь писать в JS или использовать для этого биьлиотеку JQ того же JS, так как самому удобней так и напишешь

Добавлено через 5 минут
Да, круги мулюй в ЦСС только бордер радиус не в пикселях лепи а в процентах так надежней будет, а то ввдруг размер поменять приспичит, сидеть еще высчитывать пововинки эти, "дело сложное и требует концентрации", в процентах вариант для ленивых

@sashok89 · 02.12.2013, 11:57 **[ТС]**

Отличный вариант, только вот не помог(

вместо блока с картинкой, появляется какой-то квадрат, который при наведении меняет свой цвет с серого на зеленый.
Пробовал установить блоку ширину и высоту, так как в макете все равно не помогло(

@sashok89 · 02.12.2013, 11:59 **[ТС]**

Сообщение от i_m_root

Да, круги мулюй в ЦСС только бордер радиус не в пикселях лепи а в процентах так надежней будет, а то ввдруг размер поменять приспичит, сидеть еще высчитывать пововинки эти, "дело сложное и требует концентрации", в процентах вариант для ленивых

но как потом в него картинку ноута и т.д вставить и как сделать весь это этот блок ссылкой?

@i_m_root · 02.12.2013, 12:26

Картинку своего ноута сделаешь фоновым изображением с расположением по центру и без повторений, я же написал тебе

Добавлено через 6 минут
как сделать блок ссылкой

HTML5
1
2
3
4
5
6
7
8
<a href='далеко-далеко'>
<div>   // этот див объдинит
<div>   // Этот див который кругом является,
</div>
<span> Текст ссылки
</span>
</div>
</a>

@sashok89 · 06.12.2013, 14:37 **[ТС]**

разобрался как сделать эти блоки!
Только вот еще вопрос возник: как сделать так чтобы при hover на круг становился вот таким вот:

как сам круг рисовать я кидал раньше:

CSS
1
2
3
4
5
6
width: 120px;
    height: 120px;
    background: #ececec;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;

а как этот треугольничек с верху нарисовать?

@newJS · 06.12.2013, 22:05

слепил как понял, в ие8 круг квадратный

CSS
1
2
3
4
5
6
7
8
9
.hov {width:100px; text-align:center; position:relative; top:0px; left:0px;}
.hov a {display:block; text-decoration:none; border-radius:50px;}
.hov a {background:turquoise; width:100px; height:100px;}
.hov span {width:48px; height:48px; background:url(pics/ie48.gif);}
.hov span {display:block; position:relative; top:26px; left:26px;}
.hov:hover span {background:url(pics/opera48.gif);}
.hov:hover a {background:gold;}
.hov:after {border:solid transparent; content:" "; height:0; width:0; position:absolute; border-width:8px; top:0; left:46px; margin-top:-14px;}
.hov:hover:after {border-bottom-color:red;}

HTML5
1
2
3
4
<div class="hov">
<a href="#"><span>&nbsp;</span></a>
<div>text</div>
</div>

@sashok89 · 07.12.2013, 08:11 **[ТС]**

newJS,
Спасибо за помощь!!!
Воспользовавшись вашим кодом сделал немного проще!!!

HTML5
1
2
<div class="circle">
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.circle {
    margin: 80px;
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
     position: relative;   
}
.circle::after {
    content: '';
    position: absolute;
    
    width: 0;
    height: 0;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -8px;
    left: 40px;    
}

Теперь в IE8 все отлично отображается!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@i_m_root 12 / 12 / 1 Регистрация: 18.11.2013 Сообщений: 61
	02.12.2013, 11:25
	А эти круги ты картинками или блоком написал? 0

@i_m_root 12 / 12 / 1 Регистрация: 18.11.2013 Сообщений: 61
	02.12.2013, 11:33
	картинку делаешь фоном, допустим: #div_krug { } 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	02.12.2013, 11:40 [ТС]
	Все равно не могу понять! как видно на изображении, что я отправил картинка и текст под ней должны быть ссылкой. Как это реализовать вообще не имею представления( 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	02.12.2013, 11:57 [ТС]
	Отличный вариант, только вот не помог( вместо блока с картинкой, появляется какой-то квадрат, который при наведении меняет свой цвет с серого на зеленый. Пробовал установить блоку ширину и высоту, так как в макете все равно не помогло( 0