title: Change Text on mouse hover of a link
body: <p>I am designing a wordpress website and would like to change a text underneath a set of links. I already found this treat and it looked promising:
  <a href="https://stackoverflow.com/questions/24344921/how-to-change-text-box-content-on-hover/24344993#24344993">Solution to problem</a></p>
  
  <p>Unfortunatey, this solution does not work for me. I included the CSS using the "Simple Custom CSS" plugin and included the html code like it is presented in the example. The links are there, but no text gets displayed. When I leave the "display: none" part out, I see all three text blocks. What am I doing wrong? </p>
  
  <p>My code in the page file:</p>
  
  <pre><code>&lt;a href="#" class="a-1"&gt;one&lt;/a&gt;
  &lt;a href="#"class="a-2"&gt;two&lt;/a&gt;
  &lt;a href="#"class="a-3"&gt;three&lt;/a&gt;
  &lt;div class="element-1"&gt;hello one&lt;/div&gt;
  &lt;div class="element-2"&gt;hello two&lt;/div&gt;
  &lt;div class="element-3"&gt;hello three&lt;/div&gt;
  </code></pre>
  
  <p>My code in the custom css file:</p>
  
  <pre><code>.element-1, .element-2, .element-3{
       display: none;
  }
  .a-1:hover  ~ .element-1 {
       display: block;
  }
  .a-2:hover  ~ .element-2{
       display: block;
  }
  .a-3:hover  ~ .element-3 {
       display: block;
  }
  </code></pre>