Кнопка для отображения текста

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 ~ вы можете выбрать братьев и сестер и стилизовать их в соответствии с выбранным и непроверенным состоянием.

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

Answer 2

В способе, которым вы написали css, браузер выполняет поиск элемента в пределах идентификатора hidetext. Поэтому, если вы удалите hidetext id, код должен работать нормально.