So im trying to make a background switch by adjusting the z-index with a hover. I got it to work on one of my pages but the second page has more stuff on it and is too complex. Maybe im just over looking what im suppose to fix.
First, the working code:
<style>
body {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 16px;
}
.container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
}
.content {
width: 1080px;
position: absolute;
padding: 15px;
top: 65px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
body {
position: fixed;
top: 10;
z-index: 1;
}
.test {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 300px;
}
.test2 {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 300px;
}
a {
position: absolute;
z-index: 50;
}
.new:hover ~ .test2{
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<a href="#" class="new">please woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooork</a>
<img class="test" src="test (1).jpg">
<img class="test2" src="test (2).jpg">
</div>
</div>
</body>now the one thats not working:
<style>
body {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 16px;
background-repeat: repeat;
}
.content {
position: fixed;
left: 0;
right: 0;
top: 60px;
bottom: 0;
z-index: 2;
}
.navbutton {
border-radius: 10px;
width: 100px;
height: 100px;
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
display: inline-block;
}
.expandbutton {
border-radius: 10px;
width: 1px;
height: 260px;
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.expand {
position: relative;
display: inline-block;
}
.expand-content {
display: none;
z-index: 1;
}
.show {
display:block;
}
.tablestyle{
position: fixed;
top: 50%;
right: 0;
transform: translate(0, -50%);
z-index: 10;
}
.imageframe {
border: 3px solid rgb(146, 146, 146, 1);
border-radius: 10px;
width: 100px;
height: 100px;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.imageframe:hover {
border: 3px solid red;
}
/* ---------------------Image Gallery-----------------------*/
.home {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 50%;
}
.card_1 {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 50%;
}
a:hover ~ .card_1 {
z-index: 1;
}
</style>
</head>
<body>
<div
<div class="content">
<table border="0" class="tablestyle">
<tr>
<td> <!-- base buttons-->
<div class="basenav">
<table border="0">
<tr>
<td><a class="link_1" href="#" ><img class="imageframe" src="project1/render1.png"></a></td>
<td><a href="#" >Base Option 2</a></td>
</tr>
<tr>
<td><a href="#" class="navbutton">Base Option 3</a></td>
<td><a href="#" class="navbutton">Base Option 4</a></td>
</tr>
</table>
</div>
</td>
<td> <!-- extra buttons [default hidden]-->
<div class="expand">
<div id="myExpand" class="expand-content">
<table border="0">
<tr>
<td><a href="#" class="navbutton">Base Option 5</a></td>
<td><a href="#" class="navbutton">Base Option 6</a></td>
</tr>
<tr>
<td><a href="#" class="navbutton">Base Option 7</a></td>
<td><a href="#" class="navbutton">Base Option 8</a></td>
</tr>
</table>
</div>
</td>
<td> <!-- buttons toggler-->
<table border="0">
<tr>
<td>
<button onclick="expandFunc()" class="expandbutton"><</button>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<img class="card_1" src="test (2).jpg">
<img class="home" src="test (1).jpg">
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function expandFunc() {
document.getElementById("myExpand").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.expandbutton')) {
var dropdowns = document.getElementsByClassName("expand-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>please show me what im missing here.
