, нацеленный на несколько классов сразу

Question

У меня есть эффект зависания/клика на основе CSS на моей странице, которая отлично работает. Когда объект (.print) наводится, справа отображается полноцветное изображение (.print_photo). Когда элемент кликается, изображение исчезает до серого и появляется текстовое поле (.print_text).

Функция щелчка работает только тогда, когда вы удерживаете нажатие, я бы хотел, чтобы он оставался видимым после нажатия на другой элемент. Это возможно?

(У меня недостаточно репутации, чтобы опубликовать изображение, как только я сделаю). Размер изображения: ширина: 620 пикселей; высота: 490px;

CSS

#bgtextbox{ 
    width:320px; 
    height:391px; 
    background-color:#BCBEC0; 
    margin:130px 0 0 0px; 
    position:absolute; 
    text-align:center; 
    font-family:Arial, Helvetica, sans-serif; 
    z-index:1; 
    } 

/* hover/click START */ 
.print{ 
     width:340px; 
     height:40px; 
     background-color:#E6E7E8; 
     margin:6px 0 0 0px; 
     position:relative; 
     text-align:center; 
     font-family:Arial, Helvetica, sans-serif; 
     font-weight:bold; 
     line-height:40px; 
     border:1px solid #E6E7E8; 
     z-index:12; 
     } 

.print_photo{ 
     width:620px; 
     height:490px; 
     margin:-48px 0 0 370px; 
     text-align:center; 
     background-repeat:no-repeat; 
     position:absolute; 
     z-index:2;  
     } 

.print_photo img{ 
      opacity:0; 
      max-height:100%; 
      max-width:100%; 
      } 

.print_text{ 
      width:430px; 
      height:150px; 
      margin:292px 0 0 397px; 
      position:absolute; 
      border-radius: 20px/20px; 
      opacity:.75; 
      color:transparent; 
      z-index:13; 
      } 


.print:hover{ 
      border:1px solid #F15A24; 
      cursor:pointer;    
      } 

.print:hover ~ .print_photo img{ 
          opacity:1; 
          -webkit-transition: opacity 1s ease-in-out; 
         -moz-transition: opacity 1s ease-in-out; 
         -o-transition: opacity 1s ease-in-out; 
         transition: opacity 1s ease-in-out;          
          } 

.print:active ~ .print_photo img{ 
         filter: grayscale(100%); 
         -webkit-filter: grayscale(100%); 
         -moz-filter: grayscale(100%); 
         -ms-filter: grayscale(100%); 
         -o-filter: grayscale(100%); 
         opacity:.5; 
         -webkit-transition: opacity 1s ease-in-out; 
         -moz-transition: opacity 1s ease-in-out; 
         -o-transition: opacity 1s ease-in-out; 
         transition: opacity 1s ease-in-out; 
         } 

.print:active ~ .print_text{        
        background-color:#000; 
        color:#FFF; 
        } 
    /* END */ 

HTML

<div id="bgtextbox"> 
    <div class="print">PRINT</div> 
    <div class="print_photo"><img src="images/print.png"</div></div> 
    <div class="print_text">PRINT TEXT GOES HERE</div> 
</div> 

Answer 1

Вы будете нуждаться в Javascript для этого.На самом деле есть способ сделать это с помощью переключателей и чистых css, но поскольку на самом деле это хак и тихий грязный, я перейду прямо к решению jquery.

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

.print.active ~ .print_text, .print:active ~ .print_text { 
.print.active ~ .print_photo img, .print:active ~ .print_photo img { 

Как вы заметили, моделирование теперь не срабатывает только тогда, когда мышь вниз (: активный), но и при его содержит класс .active

с несколько линии JQuery вы можете переключить этот класс по щелчку:

// when print is clicked 
$('.print').click(function() { 
    // remove the old active 
    $('.print.active').removeClass('active'); 
    // add the active class to the trigger 
    $(this).addClass('active'); 
}); 

рабочий пример можно найти здесь: http://jsfiddle.net/WRwVf/

редактировать:
Чтобы включить этот код в вашу страницу, вы должны загрузить библиотеку JQuery первым. Добавьте что-то подобное в качестве последнего узла вашего тела:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

Ниже вы можете разместить свой скрипт. Обратите внимание, что было бы разумно включить его в «готовое» событие. Что-то вроде этого:

<script type="text/javascript"> 
// when the DOM is ready 
$(document).ready(function() { 
    /* - The above code goes here - */ 
}); 
</script> 

Вы также можете поместить скрипт в отдельный файл .js, и загрузить его таким же образом, как библиотека Jquery, но это всего лишь несколько строк кода, то это будет считается чрезмерным, поскольку дополнительный HTTP-запрос замедляет вашу страницу.

Answer 2

Вы собираетесь должны использовать JS для этого. Имейте JS, который запускает onClick одного из ваших .print элементов, который добавляет к нему «выбранный» класс, сначала удаляя этот класс из всех остальных элементов.

Answer 3

Самое простое решение - использовать JS для этого, как рекомендует @DuncanLock. Чем более креативный (но основанный на CSS) способ сделать это - создать брата из .print, который является флажком.

<div id="bgtextbox"> 
    <div class="print">PRINT</div> 
    <input type="checkbox" class="print_checkbox" /> 
    <div class="print_photo"><img src="images/print.png"</div></div> 
    <div class="print_text">PRINT TEXT GOES HERE</div> 
</div> 

Установите его CSS быть:

.print_checkbox { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    opacity:0.01; 
} 

Так она заполняет всю область ДИВ делает, и выглядит прозрачным. Я должен указать случайным наблюдателям, что вам нужно будет установить position родителя (#bgtextbox), но он уже сделал это в своем CSS.

Затем используйте CSS-код :checked psuedo-класса, чтобы показать img на основе отмеченного (щелкнутого) или нет. Просто измените это:

.print:active ~ .print_photo img 

Для этого:

.print_checked:checked + .print_photo img 

Вам еще нужно решение JS для IE8-, но вы бы уже нужно это в любом случае, используя селектор ~ CSS, так что ISN Разница в совместимости с браузером.

Просто пища для размышления. Это не совсем методика кодирования WYSIWYG, но если вы являетесь разработчиком, который пытается использовать CSS поверх JS, когда это возможно (например, я), это классный маленький трюк.

Answer 4

Вы должны использовать JS для установки класса, а затем удалить его, когда это необходимо.

HTML

<div id="bgtextbox"> 
    <div id="print" class="print">PRINT</div> 
    <div class="print_photo"><img src="images/print.png"</div></div> 
    <div class="print_text">PRINT TEXT GOES HERE</div> 
</div> 

CSS

.printactive ~ .print_photo img{ 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    opacity:.5; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.printactive ~ .print_text{        
    background-color:#000; 
    color:#FFF; 
} 

JS

document.getElementById("print").addEventListener("click",activatePrintDiv); 

function activatePrintDiv(){ 
    var pclass = this.getAttribute("class"); 
    this.setAttribute("class",pclass+" printactive"); 
}