如何在 <i> 标签中覆盖父级的样式

Question

我正在使用下面的代码，所以当鼠标经过标记 i (TEST) 时，i 不会得到下划线，但这不起作用。

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>

这是一个fiddle

Answer 1

您需要在 .icon 中设置 display:inline-block，:hover 也必须在 div 父

中完成

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>

Answer 2

如果我理解得很好，你想在悬停时给整个内容加下划线，而不是在你指向图标时只？

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

div:hover .icon{
    text-decoration: underline;
}

div .icon{
    display:inline-block;
}

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>

如何在 <i> 标签中覆盖父级的样式

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

html

css

pseudo-class