Question

ul{
	margin: 0;
	padding: 0;
}
.logos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	padding-left: 101px;
	padding-right: 101px;

	list-style: none;
}
.logo{
	padding-right: 40px;
}
.logo:nth-child(4n){
	padding-right: 0px;
}
img{
	width: 260px;
	height: 100px;
}
.hover{
	display: none;
}
.logo-dj:hover{
	display: none;
}
.logo-dj:hover .first-logo-hover{
	display: block;
	width: 260px;
	height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Logos</title>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<ul class="logos">
		<li class="logo logo-dj"><a href="#"><img src="img/logo-1-jpg.jpg"></a></li>
		<li class="hover first-logo-hover"><a href="#"><img src="img/colourful-logo-1.jpg"></a></li>
		<li class="logo logo-gadgets"><a href="#"><img class="second-logo" src="img/logo-gadgets-jpg.jpg"></a></li>
		<li class="logo logo-gopro"><a href="#"><img class="third-logo" src="img/logo-gopro-jpg.jpg"></a></li>
		<li class="logo logo-vive"><a href="#"><img class="fourth-logo" src="img/vive.jpg"></a></li>
	</ul>
</body>
</html>

我正在尝试用：hover的彩色版本替换第一个徽标，但是它不起作用。感觉好像我错过了一些基本要点，但是我不知道这是什么，有人可以帮我吗？

抱歉，这是一个愚蠢的问题。

Answer 1

删除了代码的主要部分，只是为了展示如何在悬停时更改徽标。

.logo {
background-image : url('https://techcrunch.com/wp-content/uploads/2018/07/logo-2.png?w=300');
width: 300px;
height: 300px;
  background-repeat: no-repeat;

}
.logo:hover {
background-image: url('https://techcrunch.com/wp-content/uploads/2018/07/Logo-1.png?w=300');
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Logos</title>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<ul class="logos">
		<li class="logo"><a href="#"></li>
	</ul>
</body>
</html>

徽标未替换为悬停

1 个答案: