Использование одного элемента для перемещения/изменения другого при наведении с помощью CSS ⇐ CSS

[Anonymous]

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

Код: Выделить всё

@import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
h2, h3 {
.syne-font
}
p {
.work-sans-light
}
.syne-font {
font-family: "Syne", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.work-sans-light {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.work-sans-medium {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.cta-button {
background-color: #ffffff;
color: #000000;
transition: 1s ease;
}
.cta-button:hover {
background-color: #000000;
color: #ffffff;
transition: 1s ease;
}
.hidden-text {
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
overflow: hidden;
transition: 1s ease;
}
.hidden-text:hover {
opacity: 100;
}
.feature-image:hover ~ .hidden-text,
.hidden-text:hover {
opacity: 100;
}
.sliding-section {
/* margin-left: -120px;
margin-right: 120px; */
position: relative;
margin-left: -10%;
margin-right: 10%;
width: 120%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(0);
transition: ease 1s;
}
.residential {
position: relative;
transform: translateX(0);
transition: ease 1s;
}
.residential:hover {
transform: translateX(50px);
transition: ease 1s;
}
.residential:hover ~ .commercial{
transform: translateX(50px);
transition: ease 1s;
}
.commercial {
position: relative;
transform: translateX(0);
transition: ease 1s;
}
.commercial:hover {
transform: translateX(-50px);
transition: ease 1s;
}
.commercial:hover ~ .residential{
transform: translateX(-50px);
transition: ease 1s;
}

Код: Выделить всё

tailwind.config = {
theme: {
extend: {
fontFamily: {
'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
},
fontFamily: {
'Syne': ['"Syne"', 'sans-serif']
},
fontFamily: {
'Work Sans': ['"Work Sans"', 'sans-serif']
},
colors: {
greybg: '#CECCC4',
}
transitionDuration: {
'300': '300ms',
}
}
}
}





[img]https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg[/img]
Residential



See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs




[img]https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg[/img]
Hospitality &  Multi-Family


See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs

Это конкретный пример, над которым я работаю, но есть в других случаях мне удавалось иметь два дочерних элемента внутри родительского элемента, где дочерний элемент №1 мог изменять дочерний элемент №2, но дочерний элемент №2 не мог изменять дочерний элемент №1. Как работают отношения между элементами div или элементами в этом простом случае (родительский элемент с дочерним элементом № 1 и дочерним элементом № 2)?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/782 ... r-with-css