0

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>
Variable
  • 3,508
  • 4
  • 17
  • 34
Mabero
  • 47
  • 6
  • you'll need javascript for that, with CSS that's not possible – Johannes Oct 23 '18 at 16:24
  • Are you sure? Because Ive done very similar stuff with only HTML and CSS before, but it just doesnt work on this project. Ive been able to hover one div and make it change another, but I think the images on this site are messing it up. So Im just looking for a way to make it work with the images. – Mabero Oct 23 '18 at 16:26
  • 1
    yes, I am 100% sure. It IS possible to make another element change on hover if that other element is a child element of the hovered element, but not in a situation like yours – Johannes Oct 23 '18 at 16:29
  • Ah, that makes sense! Thanks! – Mabero Oct 23 '18 at 16:30
  • Definitely, this is a job for Javascript. – MrBear Oct 23 '18 at 16:35
  • So do I have to use JS or can I rewrite the code in any way? Like putting the #vindu div inside the #dor div, so that It becomes the child element? – Mabero Oct 23 '18 at 16:36
  • You do not have to use javascript your elements are absolute positioned so just re-arrange your html to make the elements siblings. See https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling – Arleigh Hix Oct 23 '18 at 16:42

0 Answers0