html - 显示文本的按钮

Question

我正在尝试为我的网站做一些过渡文本，并且我正在尝试点击一个按钮来过渡一些文本。我可以用 div 标签做到这一点，但对于特定元素，我做不到。

这是我的 HTML 代码:

<div class="infoLinks centerlinks">
    <div class="col-xs-12 col-md-12 tips" id="hidetext">
      <button class="btn btn-primary">
            Setup Info
      </button>
        <ul >
            <li>
                <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a>
            </li>
        </ul>
    </div>
</div>

这是我的 CSS:

#hidetext .showtext {
  color: #ffffff;
  -webkit-transition: color .75s ease-in;
  -moz-transition: color .75s ease-in;
  -o-transition: color .75s ease-in;
  -ms-transition: color .75s ease-in;
  transition: color .75s ease-in;
}
#hidetext:hover .showtext{
  color: #000000;
}

现在，当我将按钮代码更改为:

<button class="btn btn-primary" id="hidetext">
   Setup Info
</button>

现在我想这是因为我的按钮与我的文本不在同一个元素中。

我该如何解决这个问题？谢谢。

Answer 1

完全的 CSS 解决方案。您可以使用隐藏的复选框 来检查点击。 label 标签可以设置为按钮的样式。单击哪个将实际选中和取消选中 checkbox。然后使用 CSS ~ 选择器，您可以选择 sibling 并根据选中和未选中状态设置样式。

#clicker{
  display:none;
}
input#clicker ~ ul .showtext {
  color: #ffffff;
  -webkit-transition: color .75s ease-in;
  -moz-transition: color .75s ease-in;
  -o-transition: color .75s ease-in;
  -ms-transition: color .75s ease-in;
  transition: color .75s ease-in;
}
input#clicker:checked ~ ul .showtext {
  color: #000000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="infoLinks centerlinks">
    <div class="col-xs-12 col-md-12 tips">
      <input type="checkbox" id="clicker" />
      <label for="clicker" class="btn btn-primary" id="hidetext">
            Setup Info
      </label>
        <ul >
            <li>
                <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a>
            </li>
            <li>
                <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a>
            </li>
        </ul>
    </div>
</div>