用CSS/HTML在悬停状态下更改图像

Question

用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;}

Answer 1

一种解决方案是使用第一幅图像作为背景图像，如下所示：<div&nbsp;id="Library"></div>#Library&nbsp;{ &nbsp;&nbsp;&nbsp;background-image:&nbsp;url('LibraryTransparent.png'); &nbsp;&nbsp;&nbsp;height:&nbsp;70px; &nbsp;&nbsp;&nbsp;width:&nbsp;120px;}#Library:hover&nbsp;{ &nbsp;&nbsp;&nbsp;background-image:&nbsp;url('LibraryHoverTrans.png');}如果您的OverImage有不同的大小，则必须将它们设置如下：#Library:hover&nbsp;{ &nbsp;&nbsp;&nbsp;background-image:&nbsp;url('LibraryHoverTrans.png'); &nbsp;&nbsp;&nbsp;width:&nbsp;[IMAGE_WIDTH_IN_PIXELS]px; &nbsp;&nbsp;&nbsp;height:&nbsp;[IMAGE_HEIGHT_IN_PIXELS]px;}

Answer 2

我通常做的是，我创建一个两种状态的双重图像，就像一种两帧电影，然后我用它作为原始元素的背景，使元素的宽度/高度以像素为单位，结果只显示了图像的一半。然后悬停状态定义的基本上是“移动胶片以显示另一帧”。例如，想象一下图像必须是灰色的图钉，我们需要在悬停时换成彩色的图克斯。而“宿主”元素是一个带有id“tuxie”的span。我用两个燕尾管创建了50x25图像，一个是彩色的，另一个是灰色的，然后把图像作为25x25跨度的背景，最后，将悬停设置为向左移动背景25 px。最小代码：<style> &nbsp;&nbsp;&nbsp;&nbsp;#tuxie&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;25px;&nbsp;height:&nbsp;25px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url('images/tuxie.png')&nbsp;no-repeat&nbsp;left&nbsp;top; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#tuxie:hover&nbsp;{&nbsp;background-position:&nbsp;-25px&nbsp;0px&nbsp;}</style><div&nbsp;id="tuxie"&nbsp;/>优点是：通过将两个框架放在一个文件中，可以确保它们同时加载。这避免了当其他帧从未立即加载时，在较慢的连接上出现的难看的故障，因此第一次悬停无法正常工作。这可能更容易管理您的图像，因为“配对”的框架从来没有混淆。智能地使用Javascript或CSS选择器，您可以扩展它并在一个文件中包含更多的帧。理论上，您甚至可以在单个文件中放置多个按钮，并通过坐标控制它们的显示，尽管这种方法很快就会失控。请注意，这是用background属性，因此如果您确实需要使用<img />S，你必须不设置src属性，因为这与背景重叠。(在这里聪明地使用透明度可能会带来有趣的结果，但可能非常依赖于图像的质量以及引擎的质量。)