超链接图像在背景中形成红色框

Question

当我将鼠标悬停在横幅中的图像上时，它会在图像后面出现一个红色框，我试图通过将第一个链接设置为一类"徽标"并为其制作特定的链接信息来修复它，但这似乎不起作用。我认为这是因为链接本身是徽标，因此没有选择链接。解决此问题的最有效方法是什么？

HTML5

<header class="main-header">
        <a class="logo" href="../index.html">
        <img src="../Images/logo.png" alt="Logo"></a>   
<nav><ul>
    <li><a href="../index.html">HOME</a></li>
    <li><a href="../news/news.html">NEWS</a></li>
    <li class="active"><a href="location.html">LOCATION</a></li>
</ul></nav>     

CSS3

/* Define Hyperlink Info */
a {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
a:link, a:visited {
    color: #FFFFFF; 
    text-decoration: none;
}
a:hover, a:active {
    background-color: #C71F0E;
    color: #FFFFFF; 
    text-decoration: none;
}

/* Defines the header banner */
.main-header {
    background-image: url('../Images/flag-header.jpg');
    background-repeat: no-repeat;
    background-size: 1510px 180px;
    height: 200px;
    margin: auto;
    width: 70%; 
}
.main-header img{
    background: none;
    width: 200px;
    height: 140px;
    margin-left: 3%;
}
/* Defines Image Link */
.logo {
    background-color: transparent;
}
.logo a {
    background-color: transparent;
}
.logo a:hover, a:active {
    background-color: transparent;
}
.logo a:link, a:visted {
    background-color: transparent;
}

Answer 1

css 选择器.logo a:hover查找具有状态:hover的 a 标记，该状态位于与.logo类的div内。这不是您要完成的，因为您的a标签本身.logo类。

这是您需要的 css：

a.logo:hover {
  background-color: transparent;
}

这将查找具有类.logo并具有:hover状态的 a 标记。这将选择徽标图像周围的a，并且您不应该再在悬停时看到红色框。