Pablo Malynovytch Pablo Malynovytch - 3 months ago 9
CSS Question

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

Answer

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>