The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> z-index, Switching indices
Tachu
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 9 2023, 11:03 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there Tachu,

check out the attachment, it may suit your requirements. IPB Image

Attached File  Tachu.zip ( 1.38k ) Number of downloads: 49



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tachu
post 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! smile.gif Tachu
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 12 2023, 02:38 AM
Post #4


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743

No problem, you're very welcome. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 12:25 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC