JSFiddle - React, Tailwind, and code Playground

by Aventrux

HTML

<!DOCTYPE html>

<html lang="de">

  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>

    <div class="obj_1">
    </div>

    <div class="obj_2">
    </div>

  </body>

</html>

CSS

.obj_1:hover~.obj_2 {
  opacity: 0;
}

.obj_1 {
  width: 30px;
  height: 30px;
  background-color: blue;
  opacity: 1;
}

.obj_2 {
  width: 30px;
  height: 30px;
  background-color: green;
  transition: opacity 0.8s;
  opacity: 1;
}