Html 一次瞄准多个类

我的页面上有一个基于css的悬停/点击效果，效果非常好。当项目（.print）悬停时，全彩图像（.print_photo）将显示在右侧。单击项目时，图像将淡入灰色，并显示一个文本框（.print_text）

单击功能仅在按住单击按钮时有效，我希望它在单击另一项之前保持可见。这可能吗

（我没有足够的声誉来发布图片，一旦发布，我会发布）图片大小为宽度：620px；高度：490px

CSS

#bgtextbox{
宽度：320px；
身高：391px；
背景色：#BCBEC0；
利润率：130px00px；
位置：绝对位置；
文本对齐：居中；
字体系列：Arial、Helvetica、无衬线字体；
z指数：1；
}
/*悬停/单击“开始”*/
.打印{
宽度：340px；
高度：40px；
背景色：#E6E7E8；
利润率：6px00px；
位置：相对位置；
文本对齐：居中；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
线高：40px；
边框：1px实心#E6E7E8；
z指数：12；
}
.打印照片{
宽度：620px；
高度：490px；
利润率：-48px 0 370px；
文本对齐：居中；
背景重复：无重复；
位置：绝对位置；
z指数：2；
}
.print_photo img{
不透明度：0；
最大高度：100%；
最大宽度：100%；
} 
.打印文本{
宽度：430px；
高度：150像素；
利润率：292px0397px；
位置：绝对位置；
边界半径：20px/20px；
不透明度：.75；
颜色：透明；
z指数：13；
}
.打印：悬停{
边框：1px实心#F15A24；
光标：指针；
}
.print:hover~.print\u照片img{
不透明度：1；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.print:active~.print_photo img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
-moz滤波器：灰度（100%）；
-ms过滤器：灰度（100%）；
-o-过滤器：灰度（100%）；
不透明度：.5；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.print:active~.print_text{
背景色：#000；
颜色：#FFF；
}
/*结束*/

HTML

印刷品
打印文本在这里

您需要使用JS进行此操作。点击一个.print元素后运行一些JS，该元素会向其中添加一个“选定”类，首先从所有其他元素中删除该类。

最简单的解决方案是使用JS，正如@DuncanLock建议的那样。更具创造性（但基于CSS）的方法是创建

.print

的兄弟，这是一个复选框

印刷品
打印文本在这里

将其CSS设置为：

.print\u复选框{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
不透明度：0.01；
}

因此，它填充了div的整个区域，并且看起来是透明的。我应该向临时观察者指出，您也需要设置父对象（

#bgtextbox

）的

位置，但他已经在CSS中这样做了

然后让CSS使用
：checked
psuedo类根据选中（单击）与否显示img。只要改变这个：

.print:active ~ .print_photo img

为此：

.print_checked:checked + .print_photo img

对于IE8-，您仍然需要JS解决方案，但使用
~
CSS选择器，您已经需要它了，因此在浏览器兼容性方面没有任何区别

值得思考。这并不完全是WYSIWYG编码方法，但如果你是那种尽可能利用CSS而不是JS的开发人员（像我一样），这是一个很酷的小把戏。
你必须使用JS设置一个类，然后在需要时删除它

HTML


印刷品
打印文本在这里

CSS

.printactive~.print\u photo img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
-moz滤波器：灰度（100%）；
-ms过滤器：灰度（100%）；
-o-过滤器：灰度（100%）；
不透明度：.5；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.printactive~.print_文本{
背景色：#000；
颜色：#FFF；
}

JS

document.getElementById（“打印”）.addEventListener（“单击”，激活EPrintDiv）；
函数activatePrintDiv（）{
var pclass=this.getAttribute（“类”）；
这个.setAttribute（“class”，pclass+“printactive”）；
}
为此，您将需要Javascript。实际上，有一种技术可以通过单选按钮和纯css实现这一点，但由于这实际上是一种黑客行为，而且非常肮脏，因此我将直接讨论jquery解决方案

您必须向现有css添加一些选择器：

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

您会注意到，现在不仅当鼠标按下（：active）时会触发样式，而且当它包含类
.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');
});

可在此处找到一个工作示例：


<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>