超链接图像在背景中显示红色框答案

【问题标题】：Hyperlink image makes red box in background超链接图像在背景中显示红色框
【发布时间】：2014-01-29 18:20:58
【问题描述】：

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

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;
}

【问题讨论】：

标签： html image css hyperlink hover

【解决方案1】：

css 选择器.logo a:hover 查找状态为:hover 的a 标记，该标记在带有.logo 类的div。这不是您想要完成的，因为您的 a 标签本身就有 .logo 类。

这是你需要的 css：

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

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

【讨论】：

是的，这就是我想做的，呃，这只是那些日子之一-_-。谢谢