HTML Dog
跳至导航

悬停效果

悬停效果是网页设计中一种历史悠久的传统。它们基本上涉及当光标悬停在某个元素上时，将其更改为另一个元素。例如，如果您将图像用作链接，则可以在悬停时将该图像与另一张图像进行交换。以下是一些实现此目标的方法，包括一些 CSS3 效果，这些效果扩展了现代悬停效果的可能性。

当第三个链接被“悬停”时，一张淡入的图片被替换为一张实色的图片。

图像交换

最早的悬停效果使用 JavaScript 将一个 img 元素与另一个元素进行交换。然后 CSS 出现了，使用 :hover，我们可以更轻松地更改用作文本链接的背景图像。更简洁、更简单、更具语义，并且易于访问。

实现此目的的明显方法是执行类似的操作


a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucanfade.jpg);
    text-indent: -999em;
}

a:hover {
    background-image: url(images/toucan.jpg);
}

链接文本被移开，一张图像（“toucanfade.jpg”）被放置在其位置，当鼠标悬停在该链接上时，该图像被交换（与“toucan.jpg”）。

这样做的麻烦在于，当鼠标悬停在链接上时会有延迟，因为悬停图像正在下载，这使得效果远远不是即时的。

解决此问题的方法是实际上只使用一个包含您想要的两个图像的图像，一个叠在另一个上面。

这张图像可以使用以下 CSS 进行操作，它实现了与前一个示例相同的结果，但由于只涉及一个文件，其中包含“两个”图像，因此悬停所需的一切都会一次性下载，使得效果立竿见影。


a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucancombo.jpg);
    text-decoration: none;
    text-indent: -999em;
}

a:hover {
    background-position: bottom;
}

该技术可以进一步扩展，以适应其他链接状态，例如活动状态，并使用带有附加部分的图像文件。

淡入 / 淡出

CSS 不允许您更改背景图像的不透明度。如果允许，您可以为链接应用两个背景图像，并在悬停时将其中一个的不透明度从透明更改为实色。加上一个巧妙的过渡，就可以实现平滑的淡入/淡出效果。

但是，我们可以改变包含背景图像的框的不透明度。所以如果我们有两个框，一个叠在另一个上面，我们就可以实现同样的事情


#toucan {
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg);
    text-indent: -999em;
    position: relative;
}

a:after {
    content: "";
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg) bottom;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover:after {
    opacity: 1;
}

我们在这里使用 :after 创建了另一个样式发挥作用的区域，从而保持 HTML 不变。我们将这个框放在链接的顶部，用所需的悬停图像填充它，隐藏它，并设置我们的过渡。然后，当鼠标悬停在链接上时，这个不可见的框就会变得可见。搞定。悬停效果。

其他选项

有很多不涉及交换图像的悬停效果的探索机会。例如，当鼠标悬停在链接上时，您可以通过操作 border-radius 来更改其形状，使用变换进行旋转，并使用各种过渡动画进行创意发挥。

使用 border-radius 操作的悬停效果。