title: Styling span:hover to make span element remain visible
body: <p>I've set up span elements to be visible only when buttons are hovered over. I'd like the span to continue to be visible if the cursor is then moved onto the span element. (This already happens in Chrome by default.) I thought I could do that just with <code>span:hover {visibility: visible}</code>, but it doesn't work. Do I need to add something else as well, or is something else wrong?</p>
  
  <p>reduced CSS:</p>
  
  <pre><code>.tooltipT {
    position: absolute;
  }
  .tooltipT span {
    position: absolute;
    width: 0px;
    visibility: hidden;
  }
  .tooltipT:hover span, .tooltipT span:hover {
    visibility: visible;
    width: 400px;
    }
  .tooltipT:hover span, .tooltipT span:hover {
    bottom: 16px;
    left: -200px;
  }
  </code></pre>
  
  <p>reduced HTML:</p>
  
  <pre><code>&lt;div class="pix"&gt;
               &lt;button class="tooltipT" style="top: 50%; left: 50%;"&gt;1
                      &lt;span&gt;blah
                      &lt;/span&gt;
               &lt;/button&gt;
              &lt;img src="img/MIPs.jpg" alt="Melt-in-Place Station details"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's live <a href="http://moonwards.com/planning.html" rel="nofollow">here</a>, the image with the span element involved is half-way down the page, it is used on the pink button in the middle.</p>
  
  <p>I put it on <a href="http://codepen.io/kimholder/pen/QNjarM" rel="nofollow">Codepen</a> and am playing with suggested solutions there.</p>