用CSS/HTML在悬停状态下更改图像当鼠标悬停时,我设置了一个图像来显示另一个图像,但是第一个图像仍然出现,新的图像不会改变高度和宽度,并与另一个图像重叠。我仍然是HTML/CSS的新手,所以我可能错过了一些简单的东西。以下是代码:<img src="LibraryTransparent.png" id="Library">#Library {
height: 70px;
width: 120px;}#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;}
3 回答
慕容3067478
TA贡献1773条经验 获得超3个赞
<div id="Library"></div>
#Library { background-image: url('LibraryTransparent.png'); height: 70px; width: 120px;}#Library:hover { background-image: url('LibraryHoverTrans.png');}
#Library:hover { background-image: url('LibraryHoverTrans.png'); width: [IMAGE_WIDTH_IN_PIXELS]px; height: [IMAGE_HEIGHT_IN_PIXELS]px;}
慕无忌1623718
TA贡献1744条经验 获得超4个赞
我用两个燕尾管创建了50x25图像,一个是彩色的,另一个是灰色的, 然后把图像作为25x25跨度的背景, 最后,将悬停设置为向左移动背景25 px。
<style> #tuxie { width: 25px; height: 25px; background: url('images/tuxie.png') no-repeat left top; } #tuxie:hover { background-position: -25px 0px }</style><div id="tuxie" />
通过将两个框架放在一个文件中,可以确保它们同时加载。这避免了当其他帧从未立即加载时,在较慢的连接上出现的难看的故障,因此第一次悬停无法正常工作。 这可能更容易管理您的图像,因为“配对”的框架从来没有混淆。 智能地使用Javascript或CSS选择器,您可以扩展它并在一个文件中包含更多的帧。 理论上,您甚至可以在单个文件中放置多个按钮,并通过坐标控制它们的显示,尽管这种方法很快就会失控。
background
<img />
src
- 3 回答
- 0 关注
- 696 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消