更换或显示悬停在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

您可以添加一些CSS来li元素隐藏在它里面的任何图像时，李盘旋。这将解决您的问题将“visibility：hidden的”上悬停IMG：

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

Answer 2

您可以使用悬停伪选择更改背景图片：

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/