Страницы

Поиск по вопросам

четверг, 9 января 2020 г.

Как я могу управлять применением z-index? Hover отменяет z-index до завершения transitions

#html #css #css3 #svg #css_animation 


Я пытаюсь создать веб-страницу в HTML & CSS с 6 столбцами. Желаемое поведение состоит
в том, что, когда пользователь наводит курсор на 1 столбец, он расширяется над остальными
5 для отображения дополнительной информации, а когда пользователь уводит курсор, столбец
сжимается обратно. 

Каждый div имеет правила в CSS для ширины transition и  margin-left, чтобы развернуться
на всю ширину экрана. При наведении z-index, также принимает значения 1000, чтобы выбранный
столбец покрывал остальную часть содержимого. 

Однако, когда наведение курсора  прекращается, то  z-index сразу возвращается к неопределенному
значению, и сокращающийся столбец привязывается ко всем  столбцами справа от него,
что  нежелательно. 

Я надеюсь выяснить, как сохранить у последнего столбца,  самое высокое значение z-index,
достаточно долго, чтобы он закрылся, а затем был сброшен, чтобы любой другой расширяющийся
столбец мог иметь приоритет.    

Я попытался использовать z-index вместе transition, а также с transition-delay, однако
z-index, похоже, не связан каким-либо таймером transition. Даже при группировании его
с другими эффектами transition-delay столбец сразу же перемещается за всем справа от
него, а затем, когда таймер задержки активирован, начинается transition.    



body{
  padding: 0;
  margin: 0;
}
.category {
  float: left;
  width: 16.66%;
  text-align: center;
}

#column1{
  background-color: #147afaff;
  transition: width 1.5s;
  position:absolute;
  height: 100%;
}#column2{
  background-color: #fa9414ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:16.66%;
  height: 100%;
}#column3{
  background-color: #2bae66ff;
  transition: width 1.5s, margin-left 1.5s;
  position: absolute;
  left:33.32%;
  height: 100%;
}#column4{
  background-color: #fdd20eff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:49.98%;
  height: 100%;
}#column5{
  background-color: #603f83ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:66.64%;
  height: 100%;
}#column6{
  background-color: #f93822ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:83.30%;
  height: 100%;
}

#column1:hover{
  width: 100%;
  z-index:1000;
}#column2:hover{
  margin-left: -16.66%;
  width: 100%;
  z-index:1000;
}#column3:hover{
  margin-left: -33.32%;
  width: 100%;
  z-index:1000;
}#column4:hover{
  margin-left: -49.98%;
  width: 100%;
  z-index:1000;
}#column5:hover{
  margin-left: -66.64%;
  width: 100%;
  z-index:1000;
}#column6:hover{
  margin-left: -83.30%;
  width: 100%;
  z-index:1000;
}


  
    
    
    Expanding Columns
    
  
  
    

      

    


    

    

      

        
Column 1

      

      

        
Column 2

      

      

        
Column 3

      

      

        
Column 4

      

      

        
Column 5

      

      

        
Column 6


Ответы

Ответ 1


Сделайте, чтобы z-index имел мгновенное изменение при hover и задержку при unhover.
Убедитесь, что вы также установили значение по умолчанию.   

.category {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}


Полный код:    



body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}




  
  
  Expanding Columns
  



  

    

  


  

    

      

        
Column 1

      

      

        
Column 2

      

      

        
Column 3

      

      

        
Column 4

      

      

        
Column 5

      

      

        
Column 6

      

    

  




 Run code snippetExpand 




Источник ответа: @Temani Afif


Ответ 2


Пробую использовать решение @TemaniAfif, добавляю текст в колонки:   

Смотрится интересно.



body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}
.p1 {
margin:0.5em;
font-weight:bold;
}
 

    

      

        
Column 1

		
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 
 
		 
      

      

        
Column 2

		 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 
 
		    
 Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt.
In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta
pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam
laoreet turpis nec felis vehicula finibus.

      

      

        
Column 3
 
		
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 
  
		   
 Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt.
In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta
pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam
laoreet turpis nec felis vehicula finibus.

		
 Fusce ultricies maximus ante vitae imperdiet. Proin magna orci,
pretium nec pretium id, ultricies in risus. Praesent mauris ipsum, semper nec convallis
sit amet, vestibulum non enim. 
   
      

      

        
Column 4

		
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 

      

      

        
Column 5

		
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 

      

      

        
Column 6

		
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 

      

    

  





Связанный ответ: Как сохранить размер и расположение по центру дочернего изображения
при динамически изменяющейся ширине колонки родителя

Добавление svg иконок и блоков текста 

Соединяем два решения:


ответ @StrangerintheQ с добавлением изображений, указанный выше, в ссылке и    
ответ с текстовым наполнением:   




body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000; 
}
.img1 {
width: calc(100vw / 6);
}
.p1 {
margin:0.5em;
font-weight:bold;
}


    

      

        
Column 1
 
		 
  

		 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 

      

      

        
Column 2
 
		 
  
 
		    
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 
 
		    
 Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt.
In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta
pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam
laoreet turpis nec felis vehicula finibus.

      

      

        
Column 3

		  
  
 
		    
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie.Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. 

      

      

        
Column 4
 
		  
  
 
		    
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 

      

      

        
Column 5

		  
  
 
		    
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie. 
 
		    
 Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt.
In quis malesuada tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id. Integer congue facilisis enim porta
pretium. Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam
laoreet turpis nec felis vehicula finibus.

      

      

        
Column 6
 
		  
  
 
		    
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis
posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis
vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum
eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin
eros diam, lacinia id blandit a, efficitur eget mauris. Morbi ullamcorper velit non
urna malesuada molestie.Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis
ante. Maecenas tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie
placerat odio, at malesuada risus consequat id.

Автор: на
Ярлыки: , , , , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)