targeting multiple classes at once - html

Question

I have a css based hover/click effect on my page that works great. When the item (.print) is hovered a full color image (.print_photo) appears to the right. When the item is clicked the image fades to gray and a text box (.print_text) appears.
The clicking function only works when you hold the click down, I would like it to stay visible once clicked until another item is clicked. Is this possible?
(I don't have enough reputation to post the image once I do I will post it) image size is width:620px; height: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

You will be needing Javascript for this. There is actually a technique to do this with radio buttons and pure css, but as it is actually a hack, and quiet dirty, I will move straight to the jquery solution.
You would have to add some selectors to your existing css:
.print.active ~ .print_text, .print:active ~ .print_text {
.print.active ~ .print_photo img, .print:active ~ .print_photo img {
As you will notice, the styling will now not only be triggered when the mouse is down(:active), but also when it contains a class .active
With a few line of jQuery you can toggle that class on click:
// 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');
});
A working example can be found here:
http://jsfiddle.net/WRwVf/
edit:
To include this code in your page, you would have to load the jQuery library first. Add something like this as the last node of your body:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Below this you could then put your script. Note that it would be wise to put it inside an 'ready' event as well. Something like this:
<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
/* - The above code goes here - */
});
</script>
You can also put the script in a separate .js file, and load it in the same way as the jquery library, but as it is just a few lines of code, this will be considered overkill by some, as the extra http request would slow your page down.

Answer 2

You're going to need to use JS for this. Have some JS that gets run onClick of one of your .print elements which adds a 'selected' class to it, removing that class from all other elements first.

Answer 3

You have to use JS to set a class, then remove it when needed.
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");
}

Answer 4

The easiest solution is to use JS for this, as #DuncanLock recommends. The more creative (but CSS-based) way to do it is to create a sibling of .print that is a checkbox.
<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>
Set its CSS to be:
.print_checkbox {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.01;
}
So it fills up the whole area the div does, and looks transparent. I should point out to casual observers that you would need to set the position of the parent (#bgtextbox) as well, but he already did that in his CSS.
Then have the CSS use the :checked psuedo-class to show the img based on checked (clicked) or not. Just change this:
.print:active ~ .print_photo img
To this:
.print_checked:checked + .print_photo img
You'll still need the JS solution for IE8-, but you would have already needed it anyway using the ~ CSS selector, so there isn't any difference in terms of browser compatibility.
Just food for thought. This isn't exactly WYSIWYG coding methodology, but if you're the kind of developer that tries to leverage CSS over JS whenever possible (like me), it's a cool little trick.