CSS меняет стиль другого элемента на активный

Question

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

Я использую gumby.css Framework и в настоящее время имеют следующий HTML:

<section id="sect">
    <div class="three columns">
        <img src"/images/help.png">
    </div>
    <div class="one column">
        <img src"/images/help.png">
    </div>
</section>

И следующий CSS:

#sect .three.columns img:hover {
    content:url("/images/about.png");
    border: 5px solid red;
}

#sect .one.column img:active ~ #sect .three.columns img {
    content:url("/images/about.png");
    border: 5px solid red;
}

Первое правило CSS для #sect .three.columns img:hover работает отлично, показывая, что я выбрал правильный элемент. Но второй #sect .one.column img:active ~ #sect .three.columns img ничего не делает при активном.

Обратитесь сюда для значения ~,

У кого-нибудь есть идеи?

Благодарю.

Answer 1

Как отмечается в комментариях, это невозможно в том виде, в каком вы сейчас внедряете.

Правила CSS зависят от степени наследственности и не могут проходить через DOM, например, поднимаясь на один родительский уровень, а затем перемещаясь назад и вниз (в терминах непрофессионала). Они ограничены только идентификацией родных братьев и детей.

content стиль также доступен только для :before а также :after псевдоэлементы.

Таким образом, альтернативой было бы применить операцию к active состояние родительских элементов, удаление дочерних изображений и ссылки на background-image и не content свойство, например:

Демо Фиддл

HTML

<section id="sect">
    <div class="three columns"></div>
    <div class="one column"></div>
</section>

CSS

.column, .columns {
    height:200px;
    width:200px;
    background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
    background-size:cover;
}
.three.columns:hover ~ .one.column {
    border:1px solid red;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/9/9c/Image-Porkeri_001.jpg);
}