Пожалуйста, помогите новичку с CSS:hover
У меня проблемы с :hover, Так что я хочу, чтобы, когда я парю над дверью замка, #dor, #vindu1 должен изменить цвет на желтый. Поэтому при наведении на дверь замка окна должны пожелтеть. По какой-то причине это не работает, и я думаю, что это связано с изображениями и слоями.
Итак, чтобы сузить проблему, мой код не позволит мне парить #dor изменить background-color из #vindu1
Я был бы всегда благодарен, если бы кто-нибудь мог помочь мне понять, почему это не работает. Сейчас сайт выглядит достойно на моем экране, но я чувствую, что для других размеров экрана все будет странно.
Итак, какие изменения я могу внести в фон / изображения, чтобы сделать их более отзывчивыми.
Вся помощь очень ценится. Заранее спасибо!
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>