Новости Joomla

Вышли релизы безопасности Joomla 6.1.2 и Joomla 5.4.7

Релиз безопасности Joomla 6.1.2 и Joomla 5.4.7

Проект Joomla! рад сообщить о выходе Joomla 6.1.2 и Joomla 5.4.7. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

NorrCompetition 3.0 — новые возможности компонента конкурсов и голосований для Joomla 6

Релиз NorrCompetition 3.0 — крупное обновление расширения для проведения конкурсов и голосований в Joomla.

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

Релиз безопасности Joomla 6.1.1 и Joomla 5.4.6

Проект Joomla! рад сообщить о выходе Joomla 6.1.1 и Joomla 5.4.6. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 819 Просмотров
*

x1

  • Давно я тут
  • 638
  • 15 / 0
  • Linux — это Windows для бытовой техники
Как сделать такой хитрый hover для border'a?
« : 15.10.2020, 20:44:32 »
Своих сил не хватает, подскажите пожалуйста:
Есть меню на ul li
Не получается сделать так, что бы при наведении мышки (li:hover) появлялся бы или вертикальный border-left 4px solid #000, или линия слева от от пункта меню.
В чем трудность: этот border или  линия должны появлятся не сразу, а как бы появляться постепенно растягиваясь от своей середины кверху и книзу (линия от 1px до 10px вверх и 10 вниз допустим).
« Последнее редактирование: 15.10.2020, 21:19:09 от x1 »
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как сделать такой хитрый hover для border'a?
« Ответ #1 : 15.10.2020, 20:54:00 »
а если через :after добавить рябом блок с нулевой высотой и через transition менять её до 4?
Записан
*

x1

  • Давно я тут
  • 638
  • 15 / 0
  • Linux — это Windows для бытовой техники
Re: Как сделать такой хитрый hover для border'a?
« Ответ #2 : 15.10.2020, 21:02:41 »
Цитата: effrit от 15.10.2020, 20:54:00
а если через :after добавить рябом блок с нулевой высотой и через transition менять её до 4?
Пробовал, своих силенок не хватает. Теоретически, вот как вы советуете, я понимаю как примерно надо, а на практике результат ноль.
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как сделать такой хитрый hover для border'a?
« Ответ #3 : 15.10.2020, 21:40:26 »
Код
.nav-item:before{
	transition: 1s; 
	display:block; 
	border-left: 4px solid #000; 
	content:""; 
	position:absolute; 
	width:0px;  
	height:0px; top:32px	
	}
.nav-item:hover:before{top:24px;height:20px;}

.nav-item - это класс li, естественно, под свой меняем.
цифры тоже слегка условные, но смысл понятен, я думаю.
« Последнее редактирование: 15.10.2020, 21:43:30 от effrit »
Записан
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Re: Как сделать такой хитрый hover для border'a?
« Ответ #4 : 15.10.2020, 21:46:20 »
наверное только width:1px;   нужно ! )))
Записан
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Re: Как сделать такой хитрый hover для border'a?
« Ответ #5 : 15.10.2020, 21:48:01 »
Linux — это Windows для бытовой техники )))
Я думаю что Windows - это опухоль на теле IT ! )
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как сделать такой хитрый hover для border'a?
« Ответ #6 : 15.10.2020, 21:49:03 »
не, ширина не нужна, за счет бордера же праздник ).
но можно и через ширину блока и бакграунд столбик организовать, конечно.
Записан
*

x1

  • Давно я тут
  • 638
  • 15 / 0
  • Linux — это Windows для бытовой техники
Re: Как сделать такой хитрый hover для border'a?
« Ответ #7 : 16.10.2020, 14:48:32 »
Видимо что то еще зависит и от шаблона. У меня в итоге 2-х дней поиска заработал такой код (работает для тега а и для тега li ):
Код
a:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  bottom: 0px;
  left: -4px;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

Он же оказался наиболее простым в модификации из подчеркивания горизонтального в вертикальное заменой scaleХ() на scaleY().
В обоих случаях подчеркиваие раcширяется от центра линии к её к бокам, что и требовлось.
« Последнее редактирование: 16.10.2020, 15:24:59 от x1 »
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать что бы метки учитывали в категорию материала?

Автор SalityGEN

 Ответов: 1
Просмотров: 543 		Последний ответ 21.08.2021, 22:32:32
от SalityGEN
Как сделать модальное окно во всю ширину?

Автор dm-krv

 Ответов: 15
Просмотров: 1357 		Последний ответ 07.04.2018, 01:56:22
от palexa
Как сделать на js клик по элементу по его классу?

Автор dm-krv

 Ответов: 17
Просмотров: 1613 		Последний ответ 04.04.2018, 19:55:24
от dm-krv