我的 HTML 代码:
<header>
<div class="logo">
<img src="imagens/mascote.png" alt="" />
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Eventos</a>
</li>
<li>
<a href="#">Lojinha</a>
</li>
<li>
<a href="#">Parcerias</a>
</li>
<li>
<a href="#">
<div class="icon">
<img src="imagens/insta.png" alt="" />
</div>
</a>
</li>
</ul>
</nav>
</header>
我的CSS代码:
*, html {
margin:0;
padding:0;
}
.logo img{
height: 100%;
}
.logo{
height: auto;
margin: 10px;
}
header {
display: flex;
margin: 0px;
top: 0px;
width: 100vw;
height: 100px;
background: #000000;
alling-items: center;
}
nav {
display: flex;
justify-content: space-between;
alling-items: center;
margin: 30px 100px 0 600px;
z-index: 100;
}
nav ul {
display: flex;
alling-items: center;
justify-content: space-between;
gap: 100px;
list-style: none;
}
nav ul li a {
font-family: "Inter", sans-seriff;
font-weight: 100;
font-size: 20px;
line-height: 36px;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #0000FF;
}
.icon img:hover {
color: #0000FF;
}
.icon img{
margin: -5px;
}
一切如我所愿,但当我悬停时,Instagraam 图标不是蓝色的。为什么会发生这种情况?我该如何解决这个问题?这是因为我应该使用 svg 图标,或者我可以使用 png 来做到这一点吗? 谢谢关注
我尝试了很多方法将 png 颜色更改为蓝色(原来的 png 是白色的),但都没有用,这是我最好的尝试。
最好的选择似乎是在将鼠标悬停在图像上时更改图像 url。 这可以这样做:
<div class="image-container">
<img src="original-image.png" alt="Original Image" />
</div>
.image-container {
background-image: url(original-image.png);
}
.image-container:hover {
background-image: url(hover-image.png);
}