title: How to control the hover effect in CSS3?
body: <p>In the example below I will show you a sample of what I have right now and you will notice when you hover over the black box a transition occurs and slides in my tooltip. My problem is that I want that tooltip to only appear when I hover over the black box. In the example you will notice if you hover over the black or anywhere within 180px right of the black box the transition still occurs( this is because my graphic is 180px wide)! I want to restrict the hover effect to only the black box! Please help!</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="sidemenu"&gt;
      &lt;div id="regionsContainer"&gt;
          &lt;div id="regionsUnitedStates"&gt;
          &lt;div id="regionsUnitedStatesTooltip"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#sidemenu {
      width: 60px;
      height: 100%;
      min-width: 60px;
      height: 100vh;
      max-width: 60px;
      background-color: #383D3F;
      background-size: 100% 100%;
      background-attachment: fixed;
      position: absolute;
      left:-60px;
      transition: left ease-in-out 0.5s;
  }
  #sidemenu.show {
      left: 0;
  }
  #regionsContainer {
      width: 60px;
      height: 481px;
      min-height: 481px;
      min-width: 60px;
      max-width: 60px;
      max-height: 481px;
      background-color: #383D3F;
      position: relative;
      top: 25%;
      bottom: 25%;
  }
  #regionsUnitedStates {
      width: 60px;
      height: 60px;
      background: #000;
  }
  #regionsUnitedStatesTooltip {
      opacity:0;
      background: #555;
      height:60px;
      width:180px;
      left:100px;
      position:absolute;
      transition:all ease-in-out 0.25s;
      top:0;
  }
  #regionsUnitedStates:hover #regionsUnitedStatesTooltip{
      left: 60px;
      opacity:1;
  }
  </code></pre>
  
  <p>Example:</p>
  
  <p><a href="http://jsfiddle.net/pTMCP/">JSFIDDLE</a></p>