z-index, Switching indices |
z-index, Switching indices |
Tachu |
Apr 8 2023, 10:33 PM
Post
#1
|
Group: Members Posts: 3 Joined: 20-March 23 Member No.: 28,861 |
Hello,
How must the following code be changed so z-indices are switched when a button is clicked? Is it possible to do this in CSS rather than javascript? thank you, Tachu <!DOCTYPE html> <html style="height:2000px"> <head> <style> .changeToGreen-button { background-color: red; color: white; border: none; height: 36px; width: 105px; border-radius: 2px; cursor: pointer; margin-right: 8px; transition: opacity 0.15s; } .changeToGreen-button:hover { opacity: 0.8; } .changeToGreen-button:active { opacity: 0.5; /*switch z-indices*/ } .changeToYellow-button { background-color: red; color: white; border: none; height: 36px; width: 105px; border-radius: 2px; cursor: pointer; margin-right: 8px; transition: opacity 0.15s; } .changeToYellow-button:hover { opacity: 0.8; } .changeToYellow-button:active { opacity: 0.5; /*switch z-indices*/ } } </style> </head> <body > <div style=" position:absolute; width:400px; height:300px; z-index:2; background-color: yellow; top:50px; left:150px; "> <button class="changeToGreen-button"> Change to green </button> </div> <div style=" position:absolute; width:400px; height:300px; z-index:1; background-color: green; top:50px; left:150px; "> <button class="changeToYellow-button"> Change to yellow </button> </div> </body> </html> |
coothead |
Apr 9 2023, 11:03 AM
Post
#2
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Tachu,
coothead |
Tachu |
Apr 11 2023, 09:41 PM
Post
#3
|
Group: Members Posts: 3 Joined: 20-March 23 Member No.: 28,861 |
Big thank you coothead!! That is great help. This concept will be very useful for what I am doing! Tachu
|
coothead |
Apr 12 2023, 02:38 AM
Post
#4
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lo-Fi Version | Time is now: 25th May 2024 - 08:20 AM |