0

Хочу увеличивать размер своего div class-а при клике на него (на диапазон(радиус) div-a) через div:focus { transform: scale(); } Rогда кликаю на textbox, input и другие любые элементы внутри этого div-a, то оно уменьшается обратно. (кликаю увеличивается, второй клик - уменьшается).

Хочу чтобы при клике на этот div увеличивалось весь div и его элементы через transform:scale и, чтобы далее мог там работать, а при клике за диапазон этого div-a, чтобы оно приходило в исходное положение . Простите, если такая тема уже есть, но не нашёл то, что бы мне помогло.

.multi{
    background-color: #ffffff;
    transition: transform .2s;
    border: 1px solid black;
}
textarea {
    outline: none;
}
.multi:focus {
    transform: scale(6.0);
}
<div class="multi">
  <form action="SaveTask.jsp" method="post">
    <textarea name="tasktext" rows="4" cols="11" style="font-size: 4px">&lt;%=a2%&gt;</textarea>
    <a style="font-size: 1.5px" href="DeleteTask.jsp?primaryid=primaryid&amp;username=username&amp;id=12">Delete</a>
    <input type="hidden" name="primaryid" value="&lt;%=primaryid%&gt;" />
    <input type="hidden" name="username" value="&lt;%=username%&gt;" />
    <input type="hidden" name="id" value="12" />
    <input type="submit" value="Save &nbsp;" style="width: 7px; font-size: 1.5px; background: none !important; margin: 0 auto; border:none;">
  </form>
</div>

5
  • 1
    Чтобы псевдокласс :focus применялся бы, элемент должен быть интерактивным. Для <div> можно, например, задать атрибут tabindex.
    – mymedia
    3 июн 2019 в 4:47
  • Я задал tabindex, оно увеличивает мои элементы и сам див при клике, но когда кликаю второй раз на любое что-то, оно отменяется. Я хочу чтобы на этой площади div-а ничего не отменялось, пока я не кликнул на что-то что не в площади моего div-a
    – Timka
    3 июн 2019 в 4:49
  • Добавил код который использую, хочу при клике чтобы все увеличивалось, но когда работаю с элементами этого дива, чтобы transform:scale не отменялся (пока я не нажал что-то другое которое не в этом диапазоне, нужно чтобы работало увеличение) Помогите пожалуйста
    – Timka
    3 июн 2019 в 4:55
  • вместо псевдокласса :focus можно применить :focus-within. Тогда стили будут применяться, даже если в фокусе какой-либо из дочерних элементов.
    – mymedia
    3 июн 2019 в 5:07
  • Спасибо mymedia, помог!
    – Timka
    3 июн 2019 в 5:08

1 ответ 1

1

Вот пример поля ввода многострочного текста внутри декоративного блока. Сам блок имеет атрибут tabindex, чтобы у него была возможность получать фокус по щелчку мышью. Применяется псевдокласс :focus-within, чтобы новое масштабирование не терялось бы после перехода во внутреннее поле ввода.

.mul {
  display: inline-block;
  padding: 10% 20%;
  transition: 0.25s;
  outline: none;
}
.mul:focus-within {
  transform: scale(1.5);
  background: rgba(255, 255, 0, 0.25);
}
<div class="mul" tabindex="">
   <textarea></textarea>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.