Ответы пользователя по тегу CSS
  • Могу ли менять стили другого элемента при наведении одного элемента?

    VanDerBorsh
    @VanDerBorsh
    Люблю помогать людям, и делиться знаниями
    Полностью рабочий вариант на Javascript.
    Сохраните код как HTML и откройте в браузере.

    Читайте комментарии в коде.
    Первый вариант

    <div class="certificate">
        <div class="certificate__body">
          <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
          <p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
          
          <!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
          <button class="btn" onmouseover="bigImage();" onmouseout="smallImage();">Подробнее</button>
        </div>
        <div class="certificate__image">
        <!-- Изображению добавлен id для обращения к нему-->
          <img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
        </div>
      </div>
    
    
      <script type="text/javascript">
    
        //Берем наше изображение по ИД
        let myImage = document.getElementById('certificate__image');
        
        //Увеличивает (запускается событием onmouseover)
        function bigImage(){
            myImage.style.width = "502px";
            myImage.style.height= "363.54px";
        };
    
        //Уменьшает  (запускается событием onmouseout)
        function smallImage(){
            myImage.style.width = "250px";
            myImage.style.height= "130px";
        };
    
      </script>




    Второй вариант, с переключением класса стиля. через
    element.classList.toggle('имя стиля');

    Второй вариант

    <div class="certificate">
        <div class="certificate__body">
          <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
          <p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
          
          <!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
          <button class="btn" onmouseover="myImage.classList.toggle('large');" onmouseout="myImage.classList.toggle('large');">Подробнее</button>
        </div>
        <div class="certificate__image">
        <!-- Изображению добавлен id для обращения к нему-->
          <img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
        </div>
      </div>
    
    <style>
        /* Это класс увеличивающий изображение */
        .large{
            width: 502px;
            height: 363.54px;
        }
    </style>
    
    <script type="text/javascript">
        //Берем наше изображение по ИД
        let myImage = document.getElementById('certificate__image');
    </script>

    Ответ написан
    Комментировать
  • Как изменить иконку глаза в поле input с типом password?

    VanDerBorsh
    @VanDerBorsh
    Люблю помогать людям, и делиться знаниями
    Есть разные способы реализовать данную кнопку/иконку, не видя ваш код - нельзя дать точный ответ, вот пару тем которые помогут найти решение:

    1) https://www.javascripttutorial.net/javascript-dom/...
    2) https://www.csestack.org/hide-show-password-eye-ic...
    Ответ написан
    Комментировать
  • Как при вводе на телефоне в input поднять страницу?

    VanDerBorsh
    @VanDerBorsh
    Люблю помогать людям, и делиться знаниями
    К вашему Input нужно привязать функцию прокрутки.

    Эти две темы вам подойдут:
    1) Событие при фокусировке: https://learn.javascript.ru/focus-blur
    2) Прокрутка и управление ей: https://learn.javascript.ru/metrics-window
    Ответ написан
    Комментировать