html - 一次针对多个类

Question

我的页面上有一个基于 CSS 的悬停/点击效果，效果很好。当元素 (.print) 悬停时，右侧会出现全彩色图像 (.print_photo)。单击该元素时，图像会变灰并出现一个文本框 (.print_text)。

点击功能仅在您按住点击时有效，我希望它在点击后保持可见，直到点击另一个元素。这可能吗？

(我没有足够的声誉来发布图像，一旦我发布我会发布它)图像大小是宽度:620px；高度: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 来做到这一点，但由于它实际上是一种 hack，而且很脏，我将直接转向 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');
});

可以在这里找到一个工作示例: http://jsfiddle.net/WRwVf/

编辑:
要在您的页面中包含此代码，您必须先加载 jQuery 库。添加这样的东西作为你 body 的最后一个节点:

<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 请求会减慢您的页面速度。