title: CSS adjacent sibling selector doesn't work
body: <p>this code is supposed to display the &quot;container-1&quot; div every time I hover on the &quot;container&quot; div. However, it isn't acting like I want it to since instead of it displaying block every hover, it just stays to display:none</p>
  <p>CSS Code</p>
  <pre><code>.container:hover + .container-1 {
    display: block;
    color:blue
  }
  
  .container-1{
   display: none;
   margin-bottom: 15px;
   padding: 12px 0;
   border-radius: 3px;
   background-color: rgb(70, 70, 70);
  }
  </code></pre>
  <p>HTML Code</p>
  <pre><code>&lt;div class=&quot;container-1&quot;&gt;
          &lt;p&gt;&lt;b&gt;$167&lt;/b&gt; still needed for this project&lt;/p&gt;
      &lt;/div&gt;
  &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;w3-light-grey&quot; id=&quot;bar&quot;&gt;
              &lt;div class=&quot;w3-orange&quot; style=&quot;height: 18px;width:75%&quot;&gt;&lt;/div&gt;
          &lt;/div&gt; 
          &lt;div class=&quot;box-1&quot;&gt;
              &lt;p&gt;
                  &lt;span&gt;
                      &lt;b style=&quot;color:orange;&quot;&gt;Only 3 days left&lt;/b&gt; to fund this project
                  &lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;
                      Join the &lt;b&gt;42&lt;/b&gt; other donors who have already supported this project. Ever dollar helps.
                  &lt;/span&gt;
              &lt;/p&gt;
              &lt;div&gt;
                  &lt;input type=&quot;text&quot; class=&quot;field&quot;&gt;
                  &lt;input type=&quot;button&quot; class=&quot;btn&quot; value=&quot;Give Now&quot;&gt;&lt;br&gt;
                  &lt;span&gt;&lt;b style=&quot;color:rgb(110, 200, 235);&quot;&gt;Why give $50?&lt;/b&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>