Блог

Главная - Вопросы по программированию - Наведите курсор CSS на соседа, чтобы переключить свойства

Наведите курсор CSS на соседа, чтобы переключить свойства

#html #css

#HTML #css

Вопрос:

Это то, чего я пытаюсь достичь — демонстрация ниже.

Работает:

  • Наведите курсор на красный div, и фон станет красным 👍
  • Наведите курсор на красный div, и фон зеленого div станет зеленым 👍
  • При наведении курсора на синие разделы фон синих разделов будет синим 👍

Не работает:

  • Наведите курсор на синие элементы управления, чтобы установить / оставить фон зеленого элемента управления белым 👎

Есть ли решение только для CSS , которое я упустил из виду ? или мне нужно прибегнуть к использованию JS для этого?

 .root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}  
 <div class="root">
  <div class="main"></div>
  <div class="secondary"></div>
  <div class="secondary"></div>
</div>

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

1. Можете ли вы чередовать зеленые разделы в вашей строке. Так не могли бы вы взять зеленый, синий, синий, зеленый, голубой? Или зеленый div всегда будет первым?

2. зеленый div всегда сначала, затем неизвестное количество синих div после этого. Только один зеленый div, и всегда первым

Ответ №1:

В приведенном примере вы можете использовать общий комбинатор родственных элементов ~ для таргетинга на все .main элементы после любых синих ( .secondary ) разделений. Это означает, что вам нужно будет изменить разметку так, чтобы она .main появлялась после вашей .secondary . Затем вы можете изменить направление сгибания ваших divs так, чтобы сначала появился зеленый div следующим образом:

 .root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row-reverse;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}

.secondary:hover ~ .main {
  background: white;
}  
 <div class="root">
  <div class="secondary"></div>
  <div class="secondary"></div>
  <div class="main"></div>
</div>

Если важен порядок синих разделов, вы можете установить его order: -1 в своем .main div, а не менять порядок строк полностью:

 .root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
  order: -1;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}

.secondary:hover ~ .main {
  background: white;
}  
 <div class="root">
  <div class="secondary">1</div>
  <div class="secondary">2</div>
  <div class="main"></div>
</div>

Ответ №2:

При использовании только css это назначение будет иметь некоторые проблемы с точки зрения сетки и последовательности элементов. вы можете просто поместить элемент main class во элемент secondary class и использовать стиль position, вы знаете, у этого способа есть особые трудности, я этого не предлагаю. Но вы можете легко использовать jquery или javascript. я написал код jquery, который вызывает эти проблемы. Пожалуйста, следуйте этим путем:

// добавьте этот jquery cdn в свой html

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

// добавьте этот код в свой script.js

 $( document ).ready(function() {
    $(".secondary").hover(function () {
        $(this).parents('.root').find(".main").css({'backgroundColor':'white'});
    },function () {
        $(this).parents('.root').find(".main").removeAttr('style');
    });
});