Как менять стиль элемента из другого элемента?

Question

[NQUARE]

Как я могу в CSS при наведении на один элемент изменить и его стиль, и стиль другого элемента?

Comments

[NQUARE]

Ну ваще в целом вопрос звучит так: Как мне передвинуть один элемент при наведении на другой?
Просто думаю что сдвигание не работает из-за неправильного изменения стилей.

[Владислав Черненко]

только JS

[Simkav]

NQUARE, transform + hover

[NQUARE]

Владислав Черненко, А тут тогда что?

[NQUARE]

Simkav, Про это то я знаю, а как мне изменить именно стиль второго элемента при наведении на первый?

[Владислав Черненко]

NQUARE, правильно задавайте вопрос тогда... если он вложен внутрь родительского, то можно... в обратную сторону не работает. Если блоки независимы или на родителя, то JS.

[NQUARE]

Владислав Черненко, У меня вот такая

структура

<div class="main">
			<div class="logo">
				<a href="#">
					<h1 id="logo">PRace</h1>
				</a>
			</div>
			<div class="menu">
				<div class="buttons">
					<ul id="buttons">
						<li id="home" title="Home page (Github)"><a href="#"><i class="fa fa-home"></i></a></li>
						<li id="src" title="Source code"><a href="#"><i class="fa fa-code"></i></a></li>
						<li id="wiki" title="Wiki"><a href="#"><i class="fa fa-wikipedia-w"></i></a></li>
						<li id="docs" title="Documentations"><a href="#"><i class="fa fa-book"></i></a></li>
						<li id="contact" title="Contact me"><a href="#"><i class="fa fa-commenting-o"></i></a></li>
						<li id="thankme" title="Say thank me!)"><a href="#"><i class="fa fa-thumbs-o-up"></i></a></li>
					</ul>
				</div>
			</div>
		</div>

При наведении на logo должно выезжать menu.

[NQUARE]

Крч решил так:

.main:hover ul {
    top: 24px;
}

Ну и transition у ul.

[Владислав Черненко]

NQUARE, ну как бэ показать можно и так .logo:hover + .menu, но меню закроется как только вы с лого мышку уберете... поэтому нужно вложить меню в .logo, например... тоггда будет норм:

[NQUARE]

Владислав Черненко, Ещё вопросик), можно ли какнить это объединить\сократить?:

.main:hover #logo{
    border-radius: 5rem;
}

.main:hover ul {
    top: 24px;
}

[Владислав Черненко]

NQUARE, не нужно там сокращать ничего, так вполне себе норм

Answer 1

[NQUARE]

.main:hover ul {
    top: 24px;
}
ul {
    translition: 1s;
}

P.S: Кому интересно что получилось, зацените https://codepen.io/nquare/pen/MWbqYqd

Answer 2

[Дмитрий Беляев]

Можно как то так, но без JS интерактивность будет ни о чем

Comments

[NQUARE]

А вы пункты меню выбирать собственно пробовали=)

[NQUARE]

И всм интерактивность?

[Дмитрий Беляев]

NQUARE, интерактивность - как раз возможность пользователю повзаимодействовать с таким элементом