z Indizes

Tachu · 07.04.2023

Hallo,
wie kann der folgende code abgeändert werden damit bei Knopfdruck die indizes vertauscht werden?
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>

scatello · 07.04.2023

JavaScript ist dein Freund.

Tachu · 08.04.2023

Ich hab's schon geahnt. Ist es sicher, dass es mit CSS nicht geht?

scatello · 08.04.2023

Tachu schrieb:
Ist es sicher, dass es mit CSS nicht geht?

Ich kenne keine reine CSS-Lösung.

Sempervivum · 08.04.2023

@Tachu Mit kleineren Einschränkungen (u. a. Barrierefreiheit) lässt sich das mit dem Checkbox-Trick machen, siehe z. B. hier:
https://wiki.selfhtml.org/wiki/HTML...-Buttons_und_Checkboxen#Exkurs:_Checkbox-Hack

Edit: Wenn ich mir deinen Code ansehe, gewinne ich den Eindruck, dass Du einfach die Hintergrundfarbe eines Containers umschalten willst.
Das kannst Du erreichen indem Du einfach diese mit CSS setzt.