Как при наведении на один элемент hover менять стили другого элемента css

Как повлиять на другие элементы при наведении div

Я думаю, что это очень простой вопрос, но я не уверен, как это можно сделать.

то, что я хочу сделать, это, когда некий div завис, это повлияет на свойства другого div .

например,этот простой пример при наведении курсора мыши #cube изменения background-color но то, что я хочу, это когда я парю над #container , есть.

6 ответов

если куб находится непосредственно внутри контейнера:

если куб находится рядом с (после закрытия контейнера тега) контейнер:

если куб находится где-то внутри контейнера:

если куб является братом контейнера:

в этом конкретном примере вы можете использовать:

это работает только с cube ребенок container . Для более сложных сценариев, вам нужно использовать JavaScript.

использование селектора sibling является общим решением для укладки других элементов при наведении курсора на заданный,но он работает только если другие элементы следуют заданному в DOM. Что мы можем сделать, когда другие элементы должны быть на самом деле до зависшего? Скажем, мы хотим реализовать виджет рейтинга сигнального бара, как показано ниже:

Signal bar rating widget

Это можно сделать легко с помощью CSS flexbox модель, установив flex-direction to reverse , Так что элементы отображаются в порядке, противоположном тому, в котором они находятся в DOM. Скриншот выше из такого виджета, реализованного с помощью чистого CSS.

большое спасибо майку и Robertc за их полезные сообщения!

если у вас есть два элемента в HTML, и вы хотите, чтобы :hover над одним и целевым изменением стиля в другом два элемента должны быть непосредственно связаны-родители, дети или братья и сестры. Это означает, что два элемента либо должны находиться один внутри другого, либо оба должны содержаться в одном и том же более крупном элементе.

я хотел отобразить определения в поле на правой стороне браузера в качестве моего пользователи читают через мой сайт и :hover над выделенными терминами; поэтому я не хотел, чтобы элемент "определение" отображался внутри элемента "текст".

я почти сдался и просто добавил javascript на свою страницу,но это будущее! Мы не должны мириться с back sass из CSS и HTML, говорящих нам, где мы должны разместить наши элементы для достижения желаемых эффектов! В конце концов мы пошли на компромисс.

в то время как фактические элементы HTML в файл должен быть вложенным или содержаться в одном элементе, чтобы быть допустимым :hover цели друг к другу, css position атрибут может использоваться для отображения любого элемента, где вы хотите. Я использовал position: fixed для размещения цели my :hover действие, где я хотел его на экране пользователя, независимо от его местоположения в HTML-документе.

в этом примере объектом от элемент внутри #explainBox должен быть #explainBox или в #explainBox . Атрибуты позиции ,назначенные # definitions, заставляют его появляться в нужном месте (вне #explainBox ), хотя он технически расположен в нежелательной позиции в HTML-документе.

я понимаю, что считается плохой формой использовать то же самое #id для более чем одного элемента HTML; однако в этом случае экземпляры #light можно описать самостоятельно в силу своих позиций в уникальном ‘д’. Есть ли причина не повторять id #light в этом случае?

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

У меня проблема с CSS, я сделал 2 кнопки, при наведение на первую вторая меняется; я сделал то же самое, но наоборот и при наведение на второй кнопку, первая не меняется. Как исправить проблему?

  • Вопрос задан более двух лет назад
  • 542 просмотра
  • Facebook
  • Вконтакте
  • Twitter

hisbvdis

Нет, не сделали.
Знак "плюс" в селекторе означает выбор следующего элемента, который расположен на том же уровне, что и текущий.

В первом варианте всё сработало, так как второй элемент в Вашем коде действительно находится после первого.
Но вот второй вариант не работает.
И в CSS это невозможно.

В CSS можно обращаться только к элементам, которые идут после текущего (на том же уровне) или вложены в него. Но не наоборот.

CSS HOVER изменении свойств одного элемента при наведении курсора на другой

Для изменение свойства того или иного элемента в CSS существует такой понятие как селектор :hover.
Особенно широкое распространение hover приобретает когда нужно изменить свойство ссылки при наведении курсора. Например мы легко может подчеркнуть ссылку, которая по умолчанию не подчеркнута:

<style>
a:link, a:visited <
color: green;
text-decoration:none;
>
a:hover <
text-decoration:underline;
>
</style>
<a href="https://weblomaster.ru/category/css/">Уроки, рецепты CSS</a>

При помощи a:link и a:visited мы указали свойства для всех ссылок, в том числе тех по которым пользователь переходил ранее (:visited). Все ссылки приобретают зеленый цвет и становятся похожими на обычный текст, без подчеркивания. В то время как a:hover дает указание подчеркнуть ссылку при каждом наведении курсора.
Таким же образом мы можем добавить бордюр изображению при наведении мышки:
<style>
img <
border:1px solid green;
>
</style>
<img src="https://weblomaster.ru/wp-content/uploads/2014/03/CSS_spaces_important_style_class_id-300×300.jpg" />

Поупражнявшись с простыми примерами, перейдем к более редкой задаче , которая была вынесена в заголовок статьи. Как изменить свойства дочернего элемента при наведении курсора на родительский элемент?
Ситуация разрешается очень просто . Вначале озвучивается родительский элемент с селектором :hover , затем идет обозначение дочернего элемента который необходимо трансформировать:

<style>
p <
font-size:12px;
>
span <
color:green;
>
p:hover span <
color:red;
>
</style>
<p>Жизнь прожить ,
<span>не стили CSS выучить.</span>
</p>
<span>CSS выучить, не жизнь прожить.</span>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *