title: Rounded Corners Image Change on Hover
body: <p>I created a rounded box/button and sliced its first corner, the middle bar (which repeats horizontally to adjust the width of the button text/content) and the last corner and used following markup:</p>
  
  <pre><code>&lt;div id="left-corner"&gt;&lt;/div&gt;
  &lt;div id="middle-bar"&gt;About Us&lt;/div&gt;
  &lt;div id="right-corner"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>These divs have corresponding images from CSS and are floated left. Those three divs create a single rounded button wiht text <strong>About Us</strong> which is fine.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>I have also created similar three slices of hover images but I wonder how to apply hover to those buttons because if I use <code>:hover</code> with these hovered slices, then even hovering on corner images also creates hovering effect. One alternative is to use <strong>fixed width</strong> buttons and slice buttons completely but I do not want to do that.</p>