最近项目做首页，上面很多图片导航需要hover效果，使用css的:hover选择器发现加载hover图片时会闪烁，想着应该是请求hover图片的加载时间造成的，后来根据雪碧图的原理完美解决，把两张图片合成一张图片，然后用background-position来控制显示的位置，从而实现hover效果。实现如下：
background-position 属性设置背景图像的起始位置。
<div class="home-btn"></div>
.home-btn {
background-image: url("~static/img/home/按钮.png");
height: 90px;
width: 358px;
margin-top: 100px;
margin-left: 600px;
}
.home-btn:hover {
background-position: 0px -90px;
}
将div宽高设置为原来一张图的大小 height: 90px，width: 358px;
最近项目做首页，上面很多图片导航需要hover效果，使用css的:hover选择器发现加载hover图片时会闪烁，...
css： div.img { border: 1px solid #ccc; } div.img:hover ...
1. 引用 2. 常用标签属性 ul li a (:hover) input button img 字体和文本 边...
为避免鼠标onmouseover到新定位元素上需要display:block一个新元素，此时，若鼠标hover到新...
hover 在li标签上无效text-align:center 对img标签有效max-height 无效子...
让图片完全显示： 1、使用img标签，设置CSS样式 img{width: 100%;height:100%;} ...
我的功能是指向某个元素，然后弹出来一个提示框，刚好提示框覆盖住了指向的元素，然后就出发了onmouseleave事...
img{content: url("../img/delf.png");} 就可以直接把html的img标签的ur...
1，问题现象： img[src=""] img无路径情况下，安卓会出现一个方形边框 img[src=""] img...
can't get hover-interaction and brushing to coexist 问题描述：...
本文标题：img:hover闪烁问题
本文链接：https://www.haomeiwen.com/subject/feigvqtx.html
网友评论