gpt4 book ai didi

html - css 分层和事件类问题

转载 作者:行者123 更新时间:2023-11-28 12:52:32 25 4
gpt4 key购买 nike

我在我的类(class)上创建了一个悬停/点击效果,我想要的效果很好,但我希望它在点击时保持事件状态,直到选择了一个新元素。而且我无法让图像出现在我的方 block 后面。

我已经尝试更改我的图像容器和正方形的位置,但似乎没有任何效果。有没有办法在CSS中分层?我知道有 z-index 但我不明白那个功能。

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: absoluteposition: relative),就可以设置z-index来建立分层顺序。具有最高 z-index 的元素将位于顶部。所以 wwa_ysquares div 将位于 print_photo 之上,如果前者被赋予更高的 z-index。

(z-index 有问题,例如如果你在内部元素上设置 z-index ......但这不是问题。)

关于html - css 分层和事件类问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16824801/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com