悬停蓝线问题

Question

我试图隐藏opacity上的font和hover。它可以正常工作，但有一条蓝线一直徘徊，我不知道它是什么。我在CSS上尝试过outline: 0;并没有将其删除。

我将向您发送代码和我所谈论的内容的图片。

p {
  font-size: 45px;
  padding: 142px 0;
  border-radius: 10px;
  outline: 0;
}

p:hover {
  color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}

<div class="container painting-container">
  <div class="row">
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image canvas-main">
          <P>CANVAS</P>
        </div>
      </a>
    </div>
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image wood-main">
          <P>WOOD</P>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

您想要的属性是'text-decoration'，该属性设置为在锚点元素而不是段落元素上下划线。请参见下面的代码段。

p {
        font-size: 45px;
        border-radius: 10px;
        outline: 0;
    }
    p:hover {
        color: rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, 0);
    }

a:hover {
      text-decoration: none;
}

<div class="container painting-container">
    <div class="row">
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image canvas-main">
                    <P>CANVAS</P>
                </div>
            </a>
        </div>
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image wood-main">
                    <P>WOOD</P>
                </div>
            </a>
        </div>
    </div>
</div>