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

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

中完成

＆＃13;

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

＆＃13;

  <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>

＆＃13;

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>标签中覆盖父级样式

2 个答案: