css - 在悬停时替换或显示另一个图像
问题描述
我检查了其他问题,但它们不适用于我的情况,我不确定这是否可能。
悬停时需要替换图像。
我不能使用 javascript 或更改 html。我只能使用 CSS。
我已经尝试了很多方法,我什至设法做到了,通过使用可见性:隐藏;在 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;
}
解决方案
您可以向 li 元素添加一些 CSS 以在 li 悬停时隐藏其中的任何图像。这将解决您在悬停时将“可见性:隐藏”应用于 img 的问题:
#liIconDest-or1:hover img {
visibility: hidden;
}
推荐阅读
- python - 如何在pyqt5中捕捉鼠标悬停在QListWidget的事件上?
- c# - 个人 await vs Task.WhenAll
- java - 如何在 Java Selenium 中传递带有类型对象的页面元素
- c# - 接收“JwtSecurityToken”不支持“SamlAssertionKeyIdentifierClause”创建。在 WCF 4.5 中使用已发行令牌创建通道时出错
- haskell - 按值 (a, b) 的差异对 Int 对列表进行排序
- angular - Angular 2 类绑定
- javascript - Javascript XMLHttpRequest 在 IE 9 上不起作用
- amazon-web-services - 优化使用缓存生成和提供文件的 aws 托管应用程序
- python - pyinstaller 和 pandas(缺少多个挂钩)
- javascript - Angularjs - 将 blob 保存到无法处理动态数据的文本文件中