Как выровнять CSS по горизонтали: наведите курсор мыши на родительский элемент по центру? - PullRequest
Новая
       36

Как выровнять CSS по горизонтали: наведите курсор мыши на родительский элемент по центру?

0 голосов
/ 10 июня 2018

Я не могу найти похожую проблему для этой.

Я хочу, чтобы две CSS :hover кнопки были выровнены по горизонтали в центрированном родительском div (оранжевый div), но это не работает.

Центрирование:
Область, активируемая курсором (фиолетовая рамка), расширяется далеко за пределы кнопок, покрывая большую часть страницы.Как я могу отформатировать активированную курсором область, чтобы соответствовать размеру источника кнопок content:url(), не разрушая центрирование родительского div?Использование чего-то вроде position:absolute не кажется правильным решением.

Горизонтальное выравнивание:
display: inline-block; работает, только если я изменяю div id #alpha a{ на #alpha{ и #beta a{до #beta {.
Таким образом, кнопки располагаются горизонтально, но я теряю их функциональность.

Смотрите / редактируйте пример здесь: http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20

Возможное решение:
Определенный стиль, вероятно, необходим для :hover или что-то вроде a:hover, чтобы неожиданно большая область, активируемая курсором, могла быть уменьшена до того же размера, что и кнопка, без влияния на центрирование родительского элемента div.Мне не повезло с position:absolute.

Есть идеи? 

body {
				background-color: rgb(0,0,0);
				margin: 0px; 
				border: 0px black;
				padding: 0px;
			}

			#parent {
				background-color: rgb(200,80,0) !important;
				width: 50vw;
				font-size: 0;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);					
				text-align: center;	
				}

			a{
			border: 1px solid red !important;
			}		

			:hover{
			border: 1px solid purple !important;				           
			}

   	        #alpha a{       
   	        border: 1px solid black !important;      
   	        max-width:7%;		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-A_130_130.jpg"); 
		    display: inline-block;
    	}	
    
   		#alpha:hover a{ 
   		border: 1px solid yellow !important;             
			max-width:7%;   		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg"); 
		    display: inline-block;
    	}            

   	        #beta a{ 
   	        border: 1px solid black;             
   	        max-width:7%;	           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-B_130_130.jpg");
		    display: inline-block; 	
	        } 

	      	#beta:hover a{
	      	border: 1px solid yellow !important; 
    	max-width:7%;		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
		    display: inline-block;             
		    }
<div id=parent>	
    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
    </div>

1 Ответ

0 голосов
/ 10 июня 2018

Добавьте это к # parent 

            display: flex;
            align-items:center;
            justify-content: center;
...