title: How to change background-color on text links on hover but not image links
body: <p>I have a CSS rule like this:</p>
  
  <pre><code>a:hover { background-color: #fff; }
  </code></pre>
  
  <p>But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.</p>
  
  <p>I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:</p>
  
  <pre><code>a.imagelink:hover { background-color: transparent; }
  </code></pre>
  
  <p>Today I was looking for a more elegant solution to this problem when I stumbled upon <a href="https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps" rel="noreferrer">this</a>.</p>
  
  <p>Basically what it suggests is using <code>display: block</code>, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.</p>
  
  <p>Is there a nice way to solve this problem, or do I have to use the dirty approach again?</p>
  
  <p>Thanks,</p>