title: CSS inline styling ignores hover effect
body: <p>I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.</p>
  
  <p>I have a div element with an inline styling</p>
  
  <pre><code>&lt;div id="text-sample" style="overflow:hidden;"&gt;This is a sample text to test the CSS behavior of inline styling&lt;/div&gt;
  </code></pre>
  
  <p>My CSS </p>
  
  <pre><code>#text-sample {
      width:200px;
      white-space: nowrap;
  }
  
  #text-sample:hover {
      overflow:visible
  }
  </code></pre>
  
  <p>Here the hover effect is not applying. That is, the <code>overflow: visible</code> rule is not taking.  </p>
  
  <blockquote>
    <p>Note: Moving the overflow:hidden from inline style will fix the issue.</p>
  </blockquote>
  
  <p>I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario? </p>