SEO Сообщество: Спрашивайте и помогайте

Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.

Q&A SEO

Помогите настроить css

Trueline Trueline  
21
  19.04.2017 17:15       1 230    
Друзья, всем привет! Изучаем мы в техникуме веб-дизайн. Вроде все норм все понятно. Но тут раздали индивидуальные задания и я полностью поплыл. В общем нужно сделать вставить картинку ширина 150 пикселей, высота 250 пикселей. По сути картинка представляет собой раздел сайта. При наведении на картинку из её верхней части выезжает меню с подразделами и все они на синем фоне с 80% заливкой (таким образом картинка слегка проглядывается), цвет текста подразделов белый. А уже при наведении на  один и подразделов фон под ним становиться со 100% заливкой и цвет текста меняется на голубой. Так мне препод разъяснил это задание. А одногрупник говорит что тут ваще жесть что со скриптами делать нужно. Помогите пожалуйста. Я приблизительно все нарисовал вот:
e8a17d155c797183588315281dfd9560.jpg

Ответы на пост (9) Написать ответ
d-fm1301 d-fm1301
15
19.04.2017 19:28
вот пример это html:

<div class="razdel">
<span>Название раздела</span>
<b><b>
<ul>
<li>Пункт<li>
<li>Пункт<li>
<li>Пункт<li>
<li>Пункт<li>
</ul>
<div>
0
d-fm1301 d-fm1301
15
19.04.2017 19:33
CSS
.razdel{width:150px;height:250px;position:relative;background:url(.....) no-repeat;overflow:hidden;}
.b{position:absolute;width:150px;height:30px;z-index:2;top:0;left:0;opacity:.7;background:#цвет который нужен}
.razdel:hover b{height:250px;}
.razdel ul{list-style:none;margin:0;padding:0;position:absolute;top:30px;left:-250px;}
.razdel:hover ul{left:0;}
.razdel ul li a{display:block;line-height:30px;border-bottom;2px solid #fff;text-decoration:none;color:#fff;}
.razdel ul li a:hover{background:#цвет который нужен;}
.razdel span{line-height:30px;position:absolute;top:0;left:0;display:block;width:150px;color:yellow;}
0
d-fm1301 d-fm1301
15
19.04.2017 19:34
также для лучшего эффекта можно добавить
.razdel, .razdel:hover, .razdel b, .razdel:hover b, .razdel ul, .razdel:hover ul{transition:300ms;-webkit-transition:300ms;-moz-transition:300ms;-ms-transition:300ms;-o-transition:300ms;-khtml-transition:300ms;}
0
d-fm1301 d-fm1301
15
19.04.2017 19:35
могу конечно допустить ошибки но на скорую руку должно работать
0
d-fm1301 d-fm1301
15
19.04.2017 19:37
и с js тут нефиг мудрить, только под себя доработой цвет фона при наведении цвет ссылки при наведении размер шрифта
0
d-fm1301 d-fm1301
15
19.04.2017 19:39
а да забыл еще так
.razdel span, .razdel ul{z-index:3;}
0
Trueline Trueline
21
19.04.2017 19:43
спасибо дружище, ща попробую все это склепать. отпишусь.
0
Trueline Trueline
21
19.04.2017 20:03
почти все работает. Думаю дальше домазкую сам. Спасибо еще раз.
0
d-fm1301 d-fm1301
15
19.04.2017 20:35
будут проблемы кидай ссылку посмотрим
0