How to override parent's style in <i> tag

I'm using the code below, so when the mouse is passed by the tag i (TEST) the i won't get underline, but this is not working.

div:hover {
  background-color: yellow;
  text-decoration: underline;
}
div .icon:hover {
  text-decoration: none;
}

<h1>Welcome to My Homepage</h1>

<div>
  <h2>My name is Donald</h2>
  <p>I live in Duckburg.</p>
  <i class="icon icon-delete_enabled">TEST</i>
</div>

<p>My best friend is Mickey.</p>

Here is a fiddle

Solution

you need to set display:inline-block in .icon, also the :hover has to be done in the div parent

div:hover {
  background-color: yellow;
  text-decoration: underline;
}

div:hover .icon {
  text-decoration: none;
  display:inline-block
}

  <h1>Welcome to My Homepage</h1>

  <div>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
    <i class="icon icon-delete_enabled">TEST</i>
  </div>

  <p>My best friend is Mickey.</p>