Почему я не могу переключить div

Question

У меня небольшая проблема, я не хочу переключать div при щелчке, используя только HTML5 и CSS3, а не JS или jQuery, только HTML5 CSS3.

При нажатии на красную область я не хочу показывать текст под. Вот что я пытался решить проблему, я установил: цель, но не работает, также: фокус не работает.

HTML

<div class="click-me">
   <div class="over">
      Lorem ipsum dolor sit amet
   </div>
</div>

CSS

.click-me{
  position:relative;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
.over{
  display:none;
  position:absolute;
  bottom:-50px;
  left:0px;
}
.click-me:target .over{
  display:block;
}

https://jsfiddle.net/53g22ocs/

html css

1

ml92 7 Сен 2016 в 19:18

Answer 1

Самое близкое, что вы получите (по крайней мере, я знаю) только от css, - это селектор :active.

См. Этот JSFiddle

Однако не бойтесь какого-то супер простого VanillaJS, JQuery - излишек для этого, хотя, по моему скромному мнению.

Надеюсь, это поможет, ура.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ:

Итак, я просто следовал предоставленному исходному примеру ...

Если вы хотите, вы МОЖЕТЕ создать стиль checkbox, чтобы СМОТРЕТЬ как button, и тогда у вас будет что-то связать с селектором :checked.

Как этот CodePen

Я думал, что вы пытаетесь достичь этого с помощью того, что у вас было, но у меня сложилось впечатление, что вам просто нужен способ сделать это на чистом html / css без каких-либо js.

PS sass по-прежнему компилируется только в CSS, в конце концов, amigo. ;)

Надеюсь это поможет.

3

Chris W. 7 Сен 2016 в 16:41

Answer 2

В CSS3 нет события щелчка. хотя вы можете сделать это, установив флажок ввода .. но вам нужно событие щелчка с jQuery.

0

rmarif 7 Сен 2016 в 16:21

Answer 3

Вот моя простая попытка ...

.click-me{
  position:relative;
  width: 50px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
 .div {position:fixed;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
  text-align:right;
  }
.over{
  display:none;
  position:absolute;
  bottom:-120px;
  left:0px;
  background: blue;
  color: white;
  font-size:15px; 
}
.click-me:focus .over{
  display:block;
}

<button class="div">hide
<button class="click-me">show
   <div class="over">
      This is done with Html and Css!!!
      Now,Click hide to hide me!!!
   </div>
</button>

Когда кнопка «Показать» находится в фокусе, отображается текст, а после нажатия кнопки «Показать» кнопка «Показать» теряет фокус и текст скрывается.

0

SreYash 7 Сен 2016 в 16:53

Answer 4

Если допустимо использовать теги <a> для таргетинга на ваши div, вы можете это сделать.

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}

<div class="tab">
  <a href="#link1">Click Me</a>

  <div id="link1">
    <h3>Content</h3>
    <p>
      Put stuff here.
    </p>
  </div>
</div>

ИЗМЕНИТЬ Думаю, я неправильно понял вопрос. Попробуйте ниже.

body {
  margin: 1em;  
}

#check-button {
  display: none;
}

#link1 {
  margin-top: 10px;
  background-color: red;
}

#check-button:checked + #button + #link1 {
  display: none;
}


#button {
  background-color: yellow;
  display: inline-block;
  padding: 2px 5px;
  cursor: pointer;
}

<input type="checkbox" id="check-button">
<label id="button" for="check-button">Click Here</label>
<div id="link1">
  <h3>Content</h3>
  <p>Put stuff here.</p>
</div>

0

Cory J. 7 Сен 2016 в 16:50

Answer 5

Это можно сделать с помощью скрытого флажка. Вот рабочий пример:

https://jsfiddle.net/cf1ht61w/

В основном у вас есть скрытый флажок за пределами экрана и связанный с ним ярлык, который будет закрывать ваше интерактивное поле. Когда вы щелкаете поле, вы фактически щелкаете метку, которая устанавливает флажок и изменяет css элемента-брата.

.click-me{
  position:relative;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
.over{
  display:none;
  position:absolute;
  bottom:-50px;
  left:0px;
}

#toggleBox  {
position: absolute;
z-index: -1;
left: -1000000000px;
top: 1000000000px;
visibility: hidden;
height: 0;
width: 0;
}
#toggleLabel{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#toggleBox:checked + .over{
  display:block;
}

<div class="click-me">
<label for="toggleBox" id="toggleLabel"></label>
<input type="checkbox" id="toggleBox">
   <div class="over">
      Lorem ipsum dolor sit amet
   </div>
</div>

2

Pat 7 Сен 2016 в 16:44

Почему я не могу переключить div

5 ответов

Похожие вопросы

Новые вопросы

html