title: CSS Transition - Hover Over Parent, Effect Child, Hover Over Child
body: <p>Check out this <a href="http://jsfiddle.net/DhQA3/" rel="nofollow">jsfiddle</a> for my current implementation.</p>
  
  <pre><code>&lt;div id="menu"&gt;
    &lt;a href="#" class="left"&gt;&lt;p&gt;Left&lt;/p&gt;&lt;/a&gt;
    &lt;a href="#" class="right"&gt;&lt;p&gt;Right&lt;/p&gt;&lt;/a&gt;
    &lt;a href="#" class="top"&gt;&lt;p&gt;Top&lt;/p&gt;&lt;/a&gt;
    &lt;a href="#" class="bottom"&gt;&lt;p&gt;Bottom&lt;/p&gt;&lt;/a&gt;
    &lt;div id="icon"&gt;
      &lt;p class="icon-text"&gt;Hover over me&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a parent div, which when I hover over it, moves a few child items around and reveals them.  However, when I hover over the child items, I want to reveal more of them, but the browser still thinks I'm simply hovering over the parent.</p>
  
  <p>Any ideas?</p>
  
  <p>CSS in question:</p>
  
  <pre><code>body {
    background-color: #8bd8f4;
    height: 100%;
    width: 100%;
  }
  
  #menu {
    position: absolute;
    top: 25%;
    left: 43%;
    height: 210px;
    width: 210px;
    border-radius: 100%;
    border:7px solid #333;
    background-color: #8bd8f4;
    cursor: pointer;
    transition:all 0.7s;
    -webkit-transition:all 0.7s;
    -moz-transition: all 0.7s;
  }
  
  #menu:hover a.left {
    left: -15%;
  }
  
  #menu:hover a.right {
    right: -15%;
  }
  
  #menu:hover a.top {
    top: -15%;
  }
  
  #menu:hover a.bottom {
    bottom: -15%;
  }
  
  #icon {
    position: absolute;
    left: 4.5px;
    top: 4.5px;
    height: 200px;
    width: 200px;
    border-radius: 100%;
    background-color: #333;
    color: #8bd8f4;
    text-align: center;
  }
  
  p.icon-text {
    position: relative;
    font-size: 22px;
    font-family: 'Open Sans', Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    top: 30%;
  }
  
  a {
    position: absolute;
    text-decoration: none;
    color: #8bd8f4;
    background-color: #333;
    text-transform: uppercase;
    padding: 10px;
    font-size: 18px;
    font-family: 'Open Sans', Sans-Serif;
    font-weight: bold;
    text-align: center;
    border-radius: 25%;
  }
  
  a.left {
    top: 26.5%;
    left: 5%;
    height: 80px;
    width: 150px;
    z-index: -1;
    transition:left 0.7s;
    -webkit-transition:left 0.7s;
    -moz-transition: left 0.7s;
  }
  
  a.left:hover {
    left: -100px;
  }
  
  a.right {
    top: 26.5%;
    right: 5%;
    height: 80px;
    width: 150px;
    z-index: -1;
    transition:right 0.7s;
    -webkit-transition:right 0.7s;
    -moz-transition: right 0.7s;
  }
  
  a.right:hover {
    right: -100px;
  }
  
  a.top {
    top: 5%;
    left: 26%;
    width: 80px;
    height: 150px;
    z-index: -1;
    transition:top 0.5s;
    -webkit-transition:top 0.5s;
    -moz-transition: top 0.5s;
  }
  
  a.top:hover {
    top: -100px;
  }
  
  a.bottom {
    bottom: 5%;
    left: 26%;
    width: 80px;
    height: 150px;
    z-index: -1;
    transition:bottom 0.7s;
    -webkit-transition:bottom 0.7s;
    -moz-transition: bottom 0.7s;
  }
  
  a.bottom:hover {
    bottom: -100px;
  }
  </code></pre>