Заменить или показать другое изображение поверх тега img при наведении курсора

Question

Я проверил другие вопросы, но они не относятся к моему делу, и я не уверен, возможно ли это вообще.

Мне нужно заменить изображение при наведении на него.

Я не могу использовать JavaScript или изменить HTML.Я могу использовать только CSS.

Я пробовал много разных способов, которые мне даже удалось сделать, используя visibility: hidden;на img и применяя фоновое изображение к родителю.

Однако оно стало бесполезным, поскольку тег img - это то место, где находится действие.

HTML

 <ul class="or-body-icons ZERO">
    <li id="liIconDest-or1">
       <img id="iconDest-or1" tabindex="-1" alt="Negócios" src="https://img2.gratispng.com/20180320/bke/kisspng-computer-icons-clip-art-sales-ico-5ab10c441b8ca8.6504430515215524521129.jpg" title="Negócios" style="cursor: pointer" width="16" height="16" border="0">
    </li>
 </ul>

CSS

.ZERO {
padding: 0;
margin: 0;
border: 0;
}

#iconDest-or1{
 width:150px;
 height:100px;
 position: relative;
 z-index: 1;
}


#liIconDest-or1:hover {
 box-sizing: border-box;
 background-image: url(https://img2.gratispng.com/20180304/rde/kisspng-ico-pencil-icon-pencil-5a9c43a0652ef3.9860290115201903684145.jpg);
 background-size: 320px;
 background-repeat: no-repeat;
 cursor: pointer;
 z-index: 10;
 position: relative;
 width:320px;
 height:320px;
 }

ul.or-body-icons li {
list-style-type: none;
float: left;
width: auto;
height: 16px;
line-height: 16px;
margin: 3px 2px;
padding: 0;
}

Answer 1

Вы можете изменить фоновое изображение, используя псевдо-селектор при наведении:

https://jsfiddle.net/moy2010/sgu2jft4/3/

#test {
  background-image: url('https://dummyimage.com/600x400/000/fff');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 300px;
}

#test:hover {
  background-image: url('https://dummyimage.com/600x300/000/fff');
}

Редактировать:

Не заметил, что вы хотите переопределитьизображение из тега img.Вот обновленный jsfiddle для него:

https://jsfiddle.net/moy2010/sgu2jft4/8/

Answer 2

Вы можете добавить немного CSS к элементу li, чтобы скрыть любые изображения внутри него, когда li наведен.Это исправит вашу проблему, применяя «видимость: скрытый» к изображению при наведении курсора:

#liIconDest-or1:hover img {
  visibility: hidden;
}