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解决方案。您可以使用隐藏的checkbox来检查点击次数。 label标记可以设置为按钮样式。单击其中将实际检查并取消选中checkbox。然后使用CSS ~选择器，您可以根据已检查和未检查状态选择兄弟姐妹并设置样式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在您编写css的方式中，浏览器会搜索ID hidetext中的元素。因此，如果您删除hidetext ID，代码应该可以正常工作。

用于显示文本的按钮

2 个答案: