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

Question

[Yulia Khavaeva]

нужно чтобы при наведении на кнопку увеличивалось изображение, посмотрела решение как можно сделать это через css, но так не работает

<div class="certificate">
								<div class="certificate__body">
									<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
									<p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
									<button class="btn">Подробнее</button>
								</div>
								<div class="certificate__image">
									<img src="./img/certificate.png" alt="">
								</div>
							</div>

.certificate__body .btn:hover ~ .certificate__image img {
  width: 502px;
  height: 363.54px;
}

Answer 1

[Сергей delphinpro]

Чтобы сработал ваш селектор, разметка должны быть примерно такой

<div class="certificate">
  <div class="certificate__body">
    <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
    <p class="certificate__text">Успешно справившись со всеми заданиями</p>
    <button class="btn">Подробнее</button>
    <div class="certificate__image">
      <img src="./img/certificate.png" alt="">
    </div>
  </div>
  <!--<div class="certificate__image">
    <img src="./img/certificate.png" alt="">
  </div>-->
</div>

С текущей разметкой вам поможет только javascript. Слушайте mouseenter/mouseleave на кнопке и добавляйте/удаляйте класс на картинке.

Answer 2

[Тимур Сиразиев]

Полностью рабочий вариант на 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>