@WebProgrammingRu
Kopyl16.02.2017
21:22:43
21:22:43
Сделал так, но когда я убираю мышку с текста, полоса исчезает
http://opsundbay.com/newsletter/
Ребят, как сделать такую штуку? При наведении на SIGN UP HERE выезжает полоса, и не исчезает, когда я убираю мышку
Там js используется для этого?Или я что-то не пойму....
Igor16.02.2017
21:26:52
21:26:52
У меня просто мимо проносится
GoogleKopyl16.02.2017
21:27:23
21:27:23
У меня просто мимо проносится
Так и должно быть, даже когда убираешь курсор во время того, как оно проносится мимоp {
display: inline-block;
margin-top: 40px;
font-size: 20px;
position: relative;
overflow: hidden;
}
p:after {
content: '';
width: 100%;
height: 4px;
background-color: red;
position: absolute;
left: -50px;
top: 9px;
}
p:hover:after {
animation: slide .4s 1;
}
@keyframes slide {
from {
left: -50px;
}
to {
left: 50px;
}
}
А в моем случае, если убрать курсор во время того, как линия двигается слева направо, она исчезнетIgor16.02.2017
21:31:29
21:31:29
видимо, это проделки сафари
Igor16.02.2017
21:32:27
21:32:27
В хроме просто проносится при наведении и всё
Konstantin16.02.2017
22:00:09
22:00:09
animation-fill-mode: forwards
Сделал так, но когда я убираю мышку с текста, полоса исчезает
как раз определяет, что делать с анимацией после ее завершенияKonstantin16.02.2017
22:03:10
22:03:10
не варик. Что это значит?
Kopyl16.02.2017
22:04:17
22:04:17
Konstantin16.02.2017
22:05:06
22:05:06
оно просто поддерживается плохо :)
Kopyl16.02.2017
22:06:38
22:06:38
GoogleKopyl16.02.2017
22:07:10
22:07:10
js?
Konstantin16.02.2017
22:07:41
22:07:41
а не, ну так еп, ты хочешь чтоб у тебя хуверился блок когда ты указатель мышки снимаешь с него. ну ты гений. :)
Kopyl16.02.2017
22:08:52
22:08:52
а не, ну так еп, ты хочешь чтоб у тебя хуверился блок когда ты указатель мышки снимаешь с него. ну ты гений. :)
Я понимаю, что тут логики нет) Но как сделать как на том сайте?Konstantin16.02.2017
22:09:45
22:09:45
у тя когда p:hover применяется? :)
Kopyl16.02.2017
22:13:54
22:13:54
Konstantin16.02.2017
22:14:46
22:14:46
а у тебя не работает, потому что у тебя стиль в принципе применяется только когда блок под курсором мышки
Kopyl16.02.2017
22:16:00
22:16:00
Вот разница
Konstantin16.02.2017
22:24:41
22:24:41
у меня кстати тоже не работает :)
Kopyl16.02.2017
22:26:20
22:26:20
Konstantin16.02.2017
22:33:20
22:33:20
очень сложно понять как оно там делает, если оно не работает на двух машинах :)
Igor16.02.2017
22:38:14
22:38:14
https://html5book.ru/css3-transform/
Konstantin16.02.2017
22:38:31
22:38:31
но там сделано не так, как ты показал в примере, не с помощью animation а с помощью transform
Igor16.02.2017
22:42:26
22:42:26
Так вот тут ясно видно, что transform)
GoogleKonstantin16.02.2017
22:43:46
22:43:46
так я сам уже залез :)
но у меня все равно не работает так, как на "видео" - при наведении курсора трансформации нет :)
Igor16.02.2017
22:44:59
22:44:59
Konstantin16.02.2017
22:45:35
22:45:35
вот как на картинке - так у меня не работает
у меня срабатывает один раз при обновлении страницы. Это в хроме. А IE при обновлении не срабатывает, а при наведении срабатывает. :)
Igor16.02.2017
22:48:24
22:48:24
тоже хром
Konstantin16.02.2017
22:49:59
22:49:59
ну вот поэтому ну его в пень этот transform :)
Igor16.02.2017
22:51:00
22:51:00
Не, эт будущее ж. Да и трансформ часто юзаю на сайтах, красиво
Konstantin16.02.2017
22:52:18
22:52:18
будущее-то оно будущее, но пользователь живет в прошлом. Это как водородная бомба - лежит, красивая, но ни кто не знает как работает. :)
Igor16.02.2017
22:53:04
22:53:04
Да прям. Обычный деревянный scale уже украшает элементы на ховере
Пользователь и не должен знать, как это работает. Ему важно, чтобы красиво
Будущее мы создаём.
Konstantin16.02.2017
22:57:49
22:57:49
правильно, яб только уточнил. Ему главное не "красиво", ему главное, чтоб была кнопка "купить" и она нажималась. А как оно работает должен знать разработчик, а он не уверен до конца: тут работает, тут не работает. Поэтому, я конечно неверно выразился, не "ну его в пень" - это экстримизм... но и ставил бы я на что-нибудь понадежнее :)
а "красиво" - это да, это будущее :)
Igor16.02.2017
22:59:54
22:59:54
правильно, яб только уточнил. Ему главное не "красиво", ему главное, чтоб была кнопка "купить" и она нажималась. А как оно работает должен знать разработчик, а он не уверен до конца: тут работает, тут не работает. Поэтому, я конечно неверно выразился, не "ну его в пень" - это экстримизм... но и ставил бы я на что-нибудь понадежнее :)
Так трансформ работает же, везде, вот доказательство http://caniuse.com/#search=transformЧтобы добраться до кнопки "Купить", покупателю должен понравиться сайт. В этом и помогает трансформ
Konstantin16.02.2017
23:02:18
23:02:18
полезный кстати сайт
Чтобы добраться до кнопки "Купить", покупателю должен понравиться сайт. В этом и помогает трансформ
вот если бы он трансформировал покупателя сразу на кнопку купить, цены бы ему не было :)Igor16.02.2017
23:03:37
23:03:37
Konstantin16.02.2017
23:06:09
23:06:09
интересно кстати, что за фокусы с хромом. "Вы используете самую новую версию Chrome"
GoogleIgor16.02.2017
23:06:53
23:06:53
а у тебя какая?
AdminERROR: S client not available
Igor16.02.2017
23:08:35
23:08:35
те, что выше — уже анстейбл и дев-версии
У тебя стабильная ветка, в ней она является самой новой
Хочешь свежих — ставь canary или просто бета-версию
Konstantin16.02.2017
23:10:17
23:10:17
не, я не хочу :)
Igor16.02.2017
23:11:03
23:11:03
Я тоже не любитель беток
наелся, хватит)
но кенери можно поставить параллельно
Она и основным браузером не может поставиться, рядышком стоит)
Konstantin16.02.2017
23:13:33
23:13:33
ну на этот случай, как мы знаем, всегда есть amigo :)
Igor16.02.2017
23:17:52
23:17:52
о да))
Welcome Bot17.02.2017
05:04:35
05:04:35
Привет Art, добро пожаловать в группу. В нашем чате принято рассказывать о себе. Чем вы занимаетесь? Чего вы ожидаете от этой группы?
John17.02.2017
07:00:16
07:00:16
Так то много причин может быть. Ты бы на codepen это дело отправил и ссылочку сюда дал
Rafael17.02.2017
07:00:30
07:00:30
лады, ща
Welcome Bot17.02.2017
07:05:33
07:05:33
Привет Aleksandra, добро пожаловать в группу. В нашем чате принято рассказывать о себе. Чем вы занимаетесь? Чего вы ожидаете от этой группы?
GoogleRafael17.02.2017
07:06:58
07:06:58
Так то много причин может быть. Ты бы на codepen это дело отправил и ссылочку сюда дал
https://jsfiddle.net/kjhe7rrg/John17.02.2017
07:15:01
07:15:01
Это из-за того, что ты используешь inline-flex если ты начнешь менять font-size для .cell увидишь как меняется и отступ
Aleksandra17.02.2017
07:17:42
07:17:42
Привет Aleksandra, добро пожаловать в группу. В нашем чате принято рассказывать о себе. Чем вы занимаетесь? Чего вы ожидаете от этой группы?
Всем привет)) HR (троллинг приветствуется))), спамить вакансиями и хантить обещаю не буду? на самом деле мне интересна разработка, склоняюсь к питону для самостоятельного освоения, и да, HR не понимающий, что вокруг происходит ( а сижу в офисе я посреди PHP-Go команды) боль?John17.02.2017
07:18:36
07:18:36
Всем привет)) HR (троллинг приветствуется))), спамить вакансиями и хантить обещаю не буду? на самом деле мне интересна разработка, склоняюсь к питону для самостоятельного освоения, и да, HR не понимающий, что вокруг происходит ( а сижу в офисе я посреди PHP-Go команды) боль?
Не грусти, доставай Лутца и вникай)Dima17.02.2017
07:29:11
07:29:11
Всем привет)) HR (троллинг приветствуется))), спамить вакансиями и хантить обещаю не буду? на самом деле мне интересна разработка, склоняюсь к питону для самостоятельного освоения, и да, HR не понимающий, что вокруг происходит ( а сижу в офисе я посреди PHP-Go команды) боль?
И что немаловажно, будет просто круто найти здесь себе парня, который разбирается в Python... тогда и учить можно будет вместе)Rafael17.02.2017
07:32:07
07:32:07
John17.02.2017
07:32:22
07:32:22
На здоровье!
Rafael17.02.2017
07:32:25
07:32:25
Максим17.02.2017
07:32:46
07:32:46
Максим17.02.2017
07:35:50
07:35:50
И что немаловажно, будет просто круто найти здесь себе парня, который разбирается в Python... тогда и учить можно будет вместе)
Aleksandra добро пожаловать. Не обращай внимания на подобных. По всей видимости он обделен женским вниманием. Какие вопросы возникают задавай. Тут тебе помогутDima17.02.2017
07:37:37
07:37:37
Мог бы тебе ответить чем-нибудь крепким, но в присутствии дамы промолчу. Да и не по правилам чата это)
Rafael17.02.2017
07:37:46
07:37:46
Иннокентий антифа17.02.2017
07:37:54
07:37:54
Максим17.02.2017
07:38:14
07:38:14
@diaverchenko ответил бы он? джентельмен фигов
Открыть в Telegram