0

So, I'm getting to know CSS better now, but I stumbled into an issue trying to make a project. I am trying to make some simple page, where if I click on one element then the other one fades, and vice-versa (ex. I click on #login then #register fades, and if I click on #register #login fades).

Right now only one of the elements works kinda how expected, it is always the first div placed in the HTML code. I say "kinda", because I have to actively click the given div, and I do not know how to solve that either. Can you guys help me out? Here's the code:

<!DOCTYPE html>
<html>
  <head>
    <style>

      body{
        font-family: sans-serif;
   font-size: 20px;
   background: #34495e;
      }

      div{
   background: #191919;
   width: 100px;
   border-radius: 10px;
   padding: 60px;
   color: white;
   text-align: center;
   position: absolute;
   transform: translate(-50%,-50%);
   font-weight: bold;
      }

      #login{
 left: 50%;
 top: 40%;
 transition: 0.25s;
      }

      #register:active ~ #login{
        opacity: 0.1;
      }

      #register{
        left: 50%;
        top: 60%;
        transition: 0.25s;
      }

      #login:active ~ #register{
        opacity: 0.1;
      }

    </style>
    <title>Page Title</title>
  </head>
  <body>
    <div id="login">
      Login
    </div>
    <div id="register" login>
      Register
    </div>
  </body>
</html>
David Serb
  • 31
  • 7
  • You will need to use JavaScript for this, since there is no previous sibling selector (which is what you are trying to do). – disinfor Mar 02 '20 at 17:59
  • I am more than willing to do that, can you provide me an article or something of sort? – David Serb Mar 02 '20 at 18:04

0 Answers0