Как задать изменения объектов по включению(выключению) radio-box?

Question

[vohaha]

Цель: при вЫключенном radio-box отображается одна картинка. При включенном другая. Изменения так же должны менять картинки в другом div'e.
codepen.io/vohaha/pen/tdxaG

Почему не работает такой способ?

.picker-on {
  display: none;
}
.hero-trooper input[type=radio]:checked ~ picker-on {
  display: block;
}

Можно ли решить эту задачу только с помощью css?

Comments

[Юрий Лобанов]

Автор, куда пропали? Почему вопрос в tmp? У Вас перед глазами два правильных ответа.

[vohaha]

Да, спасибо большое. Просто посмотрел и не заходил сюда больше. С tmp не понятно.

[vohaha]

@iiil помогите на конкретном примере, если не сложно. Та же задача. При переключении radio- тонкий круг меняется на жирный и меняется картинка в блоке hero-screen.
dropmefiles.com/Vk7Vy - проект.

[Юрий Лобанов]

@vohaha ничего не понял. Чем этот случай отличается от представленного? И собственно к чему мне Ваш проект, код давайте.

[vohaha]

@iiil По большому счету ничем, но не именно тут почему то у меня не получается сделать так как нужно. codepen.io/vohaha/pen/Hbdtl

[Юрий Лобанов]

@vohaha посмотрите внимательно мой пример и пример от @Petroveg
И внимательно изучите селекторы такие как ~, +, .parent .child
Потому что Вы явно плаваете в этом. Ваш блок с картинкой должен находиться, согласно css, внутри тега input. Естественно, он у Вас находится рядом с тегом input.

Answer 1

[Евгений Петров]

Конечно можно codepen.io/cleric/pen/ktGfa

А у вас

.hero-trooper input[type=radio]:checked ~ .title .picker-on {
	display: block;
}

~ и + есть селекторы для siblings.

Answer 2

[Юрий Лобанов]

Что за элемент такой picker-on? )

codepen.io/iiil/pen/nkFBa?editors=110

Comments

[Евгений Петров]

А я-то скопипастил и не посмотрел...

[Юрий Лобанов]

@Petroveg зато твой пример слегка красивше :)