Блог

Главная - Вопросы по программированию - как кодировать, если этот элемент активирован, другой элемент изменяется с помощью html и css

как кодировать, если этот элемент активирован, другой элемент изменяется с помощью html и css

#html #css

#HTML #CSS

Вопрос:

Я хочу знать, можно ли щелкнуть по элементу, а затем изменить другой элемент только с помощью Html и CSS, и если да, то как.

что-то вроде этого ( кстати, этот код не работает ) :

 a:active div{  background-color : blue; }

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

1. итак, вы говорите, что у вас есть два дива, и когда вы нажмете div1, div2 изменит цвет фона?

2. Это будет зависеть от взаимного расположения/взаимосвязи между двумя элементами. Пожалуйста, вставьте свой HTML-код в вопрос, чтобы мы могли увидеть структуру. Если два элемента не имеют никакого отношения, то это, вероятно, невозможно, но это опять же зависит от того, какой стиль вы хотите применить, поэтому, пожалуйста, будьте как можно более конкретны в этом (т. Е. Это просто цвет фона, который должен измениться?).

Ответ №1:

Без Javascript ваши возможности довольно ограничены. Вы должны найти способ переключать состояние одним щелчком мыши и иметь возможность выражать эти состояния в CSS.

Какой-то вариант может быть следующим:

  • использование (скрыто?) радиокнопки или флажки и использование их :checked псевдокласса в CSS
  • использование якорей и их псевдоклассов (как вы уже пытались сделать)

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

Мой любимый — :target псевдокласс. Когда вы откроете URL-адрес «https://something.com#foobar» элемент с идентификатором «foobar» является текущей целью (если она существует). Одним из ограничений этого является то, что для каждого документа существует только одна цель. Вы можете управлять целью, нажимая на якоря, подобные этому:

 .dynamic-content {  display: none; }  #first:target, #second:target {  display: block; } 
 lt;divgt;  lt;div id="first" class="dynamic-content"gt;  First dynamic content  lt;a href="#"gt;Hidelt;/agt;  lt;/divgt;  lt;div id="second" class="dynamic-content"gt;  Second dynamic content  lt;a href="#"gt;Hidelt;/agt;  lt;/divgt; lt;/divgt;  lt;a href="#first"gt;Show firstlt;/agt; lt;a href="#second"gt;Show secondlt;/agt;

Ответ №2:

Один из способов ,который я использую :псевдокласс фокусировки. div:focus a {}

Метки: , ,