title: Disable hover effect in pure css
body: <p>First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant. </p>
  
  <p>In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <code>&lt;a&gt;</code> element. </p>
  
  <p><a href="http://jsfiddle.net/ramatsu/Q9rfg/" rel="nofollow">http://jsfiddle.net/ramatsu/Q9rfg/</a></p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div class="target"&gt;Target
    &lt;a href="#" class="LightMe"&gt;&lt;p&gt;.LightMe&lt;/p&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>body {
    background-color: #099;
    height: 100%;
    width: 100%;
    margin-top:200px;
  }
  
  .target{
    position: absolute;
    left: 40%;
    height: 100px;
    width: 200px;
    padding: 20px;
    background-color: #ccc;
    cursor: pointer;
  
   }
  
  a {
    display: block;
    position: relative;
    padding: 1px;
    border-radius: 15%;
  }
  
  a.LightMe {
    /*Starting state */
      background-color: white;
      border-style:solid;
      border-color:#fff;
      top: -120px;
      left: -200px;
      height: 80px;
      width: 80px;
      z-index: 10;
      opacity: 0;
      transition:left 0.55s  ease, opacity .5s .7s ease;
      -webkit-transition:left 0.55s  ease, opacity .5s .7s ease;
      -o-transition:left 0.55s  ease, opacity .5s .7s ease;
  }
  
  .target:hover a.LightMe {
  /*Ending state*/
    left: 80px;
    opacity: 1;
    transition:left 0.55s .7s ease, opacity .5s ease;
    -webkit-transition:left 0.55s .7s ease, opacity .5s ease;
    -o-transition:left 0.55s .7s ease, opacity .5s ease;
  }
  
  .target:hover {
      transition: background-color 500ms ease;
      -webkit-background-color 500ms ease;
      -o-background-color 500ms ease;
      background-color:#999;
  }
  </code></pre>
  
  <ol>
  <li>Hover over the grey box labeled Target and back off again to see the transitions on the <code>&lt;a&gt;</code> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <code>&lt;a&gt;</code> slides to it's original position, then opacity fades back out. All good so far.</li>
  <li>The catch is, if the user hovers over the hidden <code>&lt;a&gt;</code> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.</li>
  </ol>
  
  <p>I'd like to prevent any response to a hover directly over the <code>&lt;a&gt;</code> element, and really like to continue to keep it in css if possible.</p>
  
  <p>I tried adding an explicit hover to <code>&lt;a&gt;</code> and <code>.LightMe</code> to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)</p>
  
  <p>I added the background-color transition to <code>.target</code> intentionally for testing, and it provided an interesting clue: hovering over the <code>&lt;a&gt;</code> triggers the upstream transitions of the <code>.target</code> div. That's about where my brain broke and I decided I'd better seek help.</p>
  
  <p>I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):  </p>