:hover tag refuses to work on any of my projects in HTML/CSS-CodePudding

Im new to coding and am currently in a HS class. I have been trying extremely hard to get some :hover tags to work, using the knowledge I have gained from this class. The issue is that no matter what the form is, my hover tag will not work.

Here is my bare bones code:

<!DOCTYPE html>
<html>
  <head>
  
    <title></title>
      <style>
          
          two {
              display: none;
          }
          
          one {
              display: block;
          }
          
          one:hover two {
              display: block;
          }
          
      </style>
  </head>
  <body>
 
      <one>Hello</one>
      
      <two>Hello</two>
 
  </body>
</html>

Its a highly simplified version of my actual project, and in the past, this seems to have worked. It now refuses to work no matter what I change. What am I missing in this, and what are my mistakes?

CodePudding user response：

Use general sibling selector (~):

one:hover ~ two {
              display: block;
          }

DEMO HERE https://jsfiddle.net/9ascyo7k/

CodePudding user response：

I guess proper tags are missing. Try to refer the code given below

  h2{
    display: block;
    background-color: green;
    color: red;
   }
  h2:hover{
    background-color: black;
  }


 <h2>any</h2>