CSS 悬停时边框消失

Question

我的样式表有问题，我不知道下一步该怎么做。

我创造了

<p class="button">MORE</p>

因为我想要看起来像按钮的文字。

这是我用来修改它的 CSS 部分。

.content .bothead a.part .dole p.button{font-size: 16px;border: 2px solid #6d6d6d;padding: 10px 0px 10px 0px; margin-bottom: 10px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}

当我希望这个按钮在将鼠标放在整个 <a> 按钮所在的位置上后消失时，问题就开始了。

我正在使用这段代码让整个文本消失，但边框仍然存在。

.content .bothead a.part:hover {color: transparent; border: transparent;}

我设法使用这段代码摆脱了边框，使它消失了。

.content .bothead a.part .dole p.button:hover {color: transparent; border: transparent !important;}

问题是使用此代码我必须将鼠标悬停在该按钮上，并且当我将鼠标悬停在整个 <a>.

上时我想设置透明颜色

.content .bothead a.part:hover {
  color: transparent;
  border: transparent;
}

      <a class="part treti" title="" href="">
        <p class="nadpis">Title</p>
        <div class="dole">
          <p>child1</p>
          <p>child2</p>
          <p class="button">MORE</p>
        </div>
      </a>

想法是，将鼠标悬停在 <a class="part treti" title="" href=""> 上时，这些都应该消失。使用我的代码，我将所有设置为透明，仅保留按钮边框。

Answer 1

这样使用：

如果那个按钮嵌套在里面 div

yourDivName:hover button{
    color: transparent; 
    border: transparent !important;
}

请分享你的HTML，这样会很容易回答。

Answer 2

您可以通过隐藏容器而不是内容来做到这一点

.button {
  font-size: 16px;border: 2px solid #6d6d6d;
  padding: 10px 0px 10px 0px; 
  margin-bottom: 10px; 
  border-radius: 25px; 
  -webkit-border-radius: 25px; 
  -moz-border-radius: 25px;
}

.content:hover {
  color: transparent; 
  border: transparent !important;
}

<div class="content">
  <p class="button">MORE</p>
</div>

Answer 3

您为 p.button:hover {...}
应用样式然后将它们设置为所需的 div：.content .bothead a.part .dole:hover p.button {...}

Answer 4

我希望这会有所帮助，尽管我觉得在锚标记内使用 div 和 para 在语义上不是正确的事情..

<!DOCTYPE>
<html>
    <head>
      <style type="text/css">
       .content .bothead a.part .dole p.button {
         font-size: 16px;
         border: 2px solid #6d6d6d;
         padding: 10px 0px 10px 0px;
         margin-bottom: 10px;
         border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
     }
     .content .bothead a.part:hover .dole p.button {
         color: transparent; 
         border: transparent;
      }
    .content .bothead a.part:hover {
        text-decoration: none;
    }
</style>
</head>
<body>
  <div class="content">
    <div class="bothead">
        <a class="part" href="#">
            <div class="dole">
                <p class="button">Hello</p>
            </div>
        </a>
    </div>
</div>
</body>

</html>

CSS 悬停时边框消失

CSS border dissapear on hover

html

css

border