Im having some problems with :hover
. So what I want is that when I hover the door of the castle, that is the div called #dor
, the #vindu1
should change color to yellow. So when hovering the door of the castle, the windows should turn yellow. For some reason this doesn't work, and I think it has to do with the images and layers.
So to narrow down the problem is that my code won't let me hover #dor
to change the background-color
of #vindu1
I would be forever grateful if someone could help me understand why this doesn't work. The site looks decent on my screen now, but I have a feeling everything is gonna be weird for other screen sizes.
So what changes could I make to the background/images to make them more responsive.
All help is very appreciated. Thanks in advance!
body {
margin: 0;
background-color: #d37421;
}
#container {
position: relative;
}
#siluette {
position: fixed;
bottom: 0;
width: 100rem;
}
#slott {
position: fixed;
bottom: 0px;
left: 630px;
}
#dor {
position: absolute;
left: 892px;
background-color: black;
width: 54px;
height: 85px;
top: 686px;
opacity: 0;
}
#dor:hover {
opacity: 1;
}
#dor:hover~#vindu1 {
background-color: yellow;
}
#vindu1 {
position: absolute;
background-color: black;
left: 688px;
top: 600px;
height: 200px;
width: 474px;
}
#maane {
position: fixed;
width: 200px;
height: 200px;
background-color: rgb(221, 22, 22);
top: 60px;
right: 100px;
border-radius: 50%;
transition: 3s;
}
#maane:hover {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" href="side1.css" ;>
</head>
<body>
<div id="container">
<div id="vindu1"></div>
<img id="slott" src="https://uploads.codesandbox.io/uploads/user/aa69e076-b797-4e7e-bcb7-5361856ae103/LWD8-castlemod.png" height="600px">
<img id="siluette" src="https://uploads.codesandbox.io/uploads/user/566a27be-83e1-4eee-a368-4640077fe5d5/0xb9-bakgrunn1.png">
<a href="side2.html">
<div id="dor"></div>
</a>
<div id="maane"></div>
</div>
<!-- End Container-->
</body>
</html>