Изменение картинки при наведении на блок

Question

Получилось сделать только чтобы картинка поменялась, если навести именно на неё. Как сделать, чтобы она менялась при наведении на блок, которому она принадлежит?

#menu li:hover {
  background: #42aaff no-repeat 0 0;
}

#menu li a:hover {
  color: #FFF;
}

#forimg img:hover {
  opacity: 0;
}

<li>
  <a href="/profile" accesskey="1" title="" style="	 width:133px; 	padding: 0em 1.5em; padding-top:17px;  padding-bottom:3px; border: 2px solid #42aaff;">
    <div id="forimg" style="position:relative; bottom:6px;">
      <img src="http://via.placeholder.com/30x30/33ff99/555555?text=Foto_1" class="img2" width="30" height="" align="left" />
      <img src="http://via.placeholder.com/30x30/33ff99/555555?text=Foto_2" id="forimg1" width="30" height="" align="left" style="margin-left:-33px;" />
    </div>
</li>

Получается у меня кнопка с белым фоном и синим текстом, рядом с текстом синяя картинка. Когда навожу на кнопку, фон становится синим, а текст белым. Нужно чтобы побелела и картинка. Сделал через прозрачность, но работает только если навести на саму картинку, а не на кнопку.

Answer 1

li{
border:1px solid red;
}
.img-2 {
  opacity: 0;
}

li:hover .img-2 {
  opacity: 1;
}

li:hover .img-1 {
  opacity: 0;
}

<li>
  <img src="http://via.placeholder.com/30x30/33ff99/555555?text=Foto_1" class="img-1" />

  <img src="http://via.placeholder.com/30x30/33ff99/555555?text=Foto_2" class="img-2" />
</li>

Answer 2

Я вот так это сделал на ul li - но это не будет работать на мобилках

Вот здесь это лучше отображается: https://codepen.io/topicstarter/pen/oNjGQvy

смотреть на весь экран

let i = 0,
  out = "",
  sec = 0.01,
  uh = 500,
  coof = 50;

while (i < coof) {
  i++;
  out += `<li></li>`;
}

ul.innerHTML = out;
document.querySelector("#ul").style.height = uh + "px";
document.querySelectorAll("#ul li").forEach(function(el, index) {
  el.style.transitionDelay = `${sec * index}s`;
  el.style.height = uh / coof + "px";
})

#ul {
  width: 90%;
  height: 500px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background: url(https://cs9.pikabu.ru/post_img/2018/03/19/10/og_og_1521478669213611400.jpg);
  background-size: cover;
}

li {
  background: #ccc;
  width: 0%;
  transition: 0.76s cubic-bezier(0, 1.7, .65, .6);
  overflow: hidden;
  background: url(https://avatars.mds.yandex.net/get-pdb/215709/a5c79f6f-0f66-4b21-92d6-8de90d6ea5d5/s1200?webp=false);
  background-attachment: fixed;
  background-size: cover;
}

#ul:hover li {
  width: 100%;
}

<ul id="ul"></ul>

БЛОГ НА HUSL

Изменение картинки при наведении на блок

Ответы (2 шт):