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查找a标记，其中:hover状态为 in a div {{1} } .class。这不是您要完成的任务，因为您的.logo代码本身有a个字段。

这是你需要的css：

.logo

这会查找具有类a.logo:hover { background-color: transparent; }并且具有a状态的.logo标记。这将选择徽标图片周围的:hover，您不应再悬停红色框。

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

1 个答案: