title: Overflow:Visible outside the container
body: <p>I have a fixed width div with paragraph inside.</p>
  
  <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/HrasZ/1/" rel="nofollow">http://jsfiddle.net/HrasZ/1/</a></p>
  
  <p>The paragraph is styled with the following css:</p>
  
  <pre><code>p {
      white-space: nowrap;
      overflow: hidden;
      background: grey;
      color: white;
      text-overflow: ellipsis;        
  }
  </code></pre>
  
  <p>I would like to add new css class p:hover, and show all the hidden text when hovered.</p>
  
  <pre><code>p:hover {
      white-space: nowrap;
      overflow: visible;
      background: grey;
      color: white;        
  }
  </code></pre>
  
  <p>But it seems that only the text is using overflow: visible, but not the background color.
  Is there any way to achieve this?</p>
  
  <p>NOTE: I can't change the div with.</p>