Question

我的StyleSheet遇到问题，我不知道下一步该做什么。

我创建了

<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

您可以通过隐藏容器而不是内容

来实现

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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边框在悬停时消失

4 个答案: