css分层和活动类问题 [英] css layering and active class issues

问题描述

我对我的类创建了悬停/点击效果，我的效果很好，但我希望它在点击时保持活动，直到选择了新项目。

I created a hover/click effect on my class(es) and the effect I am going for works fine, but I want it to stay active when clicked, until a new item is selected. And I can't make the image(s) appear behind my squares.

我尝试改变了图片容器和方块的位置，没有任何东西似乎工作。有没有办法在CSS层？我知道有z-index，但我不明白这个功能。

I've tried changing the position on both my image container and the squares and nothing seems to work. Is there a way to layer in css? I know there is z-index but i don't understand that function.

CSS

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

#wwa_ysquares{
        width:600px;
        height:600px;
        background-color:#fdb813;
        position:absolute;
        -webkit-transform: rotate(-65deg);
        -moz-transform: rotate(-65deg);
        -ms-transform: rotate(-65deg);
        -o-transform: rotate(-65deg);
        transform: rotate(-65deg);
        margin:100px 0 0 -200px;
        border-radius: 50px / 50px;
        opacity: 0.75;
        }

#wwa_osquares{
        width:600px;
        height:600px;
        background-color:#f15922;
        position:absolute;
        -webkit-transform: rotate(-65deg);
        -moz-transform: rotate(-65deg);
        -ms-transform: rotate(-65deg);
        -o-transform: rotate(-65deg);
        transform: rotate(-65deg);
        margin:380px 0 0 400px;
        border-radius: 50px / 50px;
        opacity: 0.75;
        }

/* 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;
        }

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

.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;
            }


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

.print:hover ~ .print_photo img{
                            opacity:1;                                      
                            }

.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 id="wwa_ysquares"></div>
<div id="wwa_osquares"></div>
<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>

推荐答案

在分层方面，位置集（像 position：absolute 或 position：relative ），可以设置z-index来建立分层顺序。具有最高z-index的元素将位于顶部。因此，如果前者被赋予更高的z-index，那么 wwa_ysquares div将位于 print_photo

In terms of layering, as long as an element has position set (like position: absolute or position: relative) you can set a z-index to establish the layering order. The element with the highest z-index will sit on top. So the wwa_ysquares div will sit above the print_photo if the former is given a higher z-index.

（有z-index的陷阱，例如如果你在内部元素上设置z-index ...但这不是一个问题。）

(There are gotchas with z-index, such as if you are setting the z-index on inner elements ... but that's not an issue here.)

这篇关于css分层和活动类问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！