Cacher is the code snippet organizer for pro developers

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: verdana;
}

button {
  width: 1in;
  height: 1in;
  background-color: darkorange;
  margin: 24px;
  opacity: .25;
  border: 0px;
}

h4 {
  font-size: 36px;
  color: darkorange;
  display: inline;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(document).ready(function() {

  //send a message to the console window to check 
  //if this page is beting read
  console.log("reaady");

  //hide all <h4>s
  $('h4').hide();

  $('button').mouseover(function() {
    $(this).fadeTo('linear', 1);
    //use the next() method to show the html tag that comes right after the <button> that registered the event
  });

  $('button').mouseout(function() {
    //use the next() method to show the html tag that comes right after the <button> that registered the event, but this time chain the function
    $(this).fadeTo('linear', .25);
  });

  //close jQuery
});

<nav>
  <ul>
    <li>
      <button></button>
      <h4>yes</h4>
    </li>
    <li>
      <button></button>
      <h4>no</h4>
    </li>
    <li>
      <button></button>
      <h4>maybe</h4>
    </li>
  </ul>
</nav>