title: How do I stop text from triggering mouse exit from image behind it?
body: <p>I am new to CSS and jQuery and have an issue that I expect is easy to fix but I cannot sort it. I have a vertical menubar and each item on the menu has a different background image and text. I want the image to fade to another on rollover and have got this working by placing another image behind it and using the opacity change in jQuery. My issue is that when the mouse hovers over the text it reverts to the original image. Is it possible to avoid this while still keeping the text as a clickable link? I thought changing from hover to mouse enter and exit would do it but it hasn't. Thanks</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="project"&gt;
  &lt;a href="costumes_parisiens.html"&gt;&lt;img src="images/costumes.jpg" width="350" height="65"&gt;&lt;/a&gt;
  &lt;a href="costumes_parisiens.html"&gt;&lt;h1&gt;Chester Beatty Library&lt;/h1&gt;
  
  &lt;div class="rollover"&gt;
  &lt;a href="costumes_parisiens.html"&gt;&lt;img src="images/costumes_hover.jpg" width="350" height="65"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.project {
  height: 60px;
  list-style-type: none;
  display: block;
  position: relative;
  margin-top: 15px;
  z-index:0;
  }
  
  .rollover {
  top: 0px;
  height: 60px;
  list-style-type: none;
  display: block;
  position: absolute;enter code here
  z-index:1;
  
  }
  
  h1  {
  position: absolute;
  top: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  font-size: 24px;
  color: #FFF;
  margin: 5px;
  z-index:2;
  </code></pre>
  
  <p>}</p>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
  $('.rollover') .animate({
   opacity:0,   
  });
  
  $(document).ready(function(){
  $('.rollover').mouseenter(function(){
  $(this).stop().animate({opacity:1}, 'fast');
  });
  $('.rollover').mouseleave(function(){
  $(this).stop().animate({opacity:0}, '7000');
  });
  
  });
  </code></pre>