Question

我正在尝试做一个简单的悬停效果。我使用了corelangs.com网站上的模板

它完全有效，但只有当我在文档中只有1个悬停效果时。

I.e：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.urlImg { width: 300px; height:211px; display:block; background-image: url('images/001.jpg'); } .urlImg:hover { background-image: url('images/001over.jpg'); } </style>
</head>

<body>
<a href="http://www.corelangs.com" class="urlImg" title="Corelangs link">
</a>

</body>
</html>

但是，如果我想实现两种不同的悬停。（基本上我想用12个项目进行缩略图概述，当点击缩略图时，它们会悬停并成为不同的图像。它完全失败......

在这个例子中，我添加了2秒悬停

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.urlImg { width: 300px; height:211px; display:block; background-image: url('images/001.jpg'); } .urlImg:hover { background-image: url('images/001over.jpg'); }

.urlImg2 { width: 300px; height:211px; display:block; background-image: url('images/002.jpg'); } .urlImg:hover { background-image: url('images/002over.jpg'); }

</style>
</head>

<body>

<a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"></a>
<br>
<a href="http://www.corelangs.com" class="urlImg2" title="Corelangs link"></a>

</body>
</html>

不起作用......任何想法改变什么？

Answer 1

当您重复.urlImg:hover两次而不是使用.urlImg2:hover时，这看起来像是次要的复制粘贴错误：

.urlImg { /*omitted for brevity */ } 
.urlImg:hover { background-image: url('images/001over.jpg'); }

.urlImg2 { /* omitted for brevity */ } 
.urlImg2:hover { background-image: url('images/002over.jpg'); }

css hover：仅适用于一个图像，但没有多个如何定义函数

1 个答案: