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