Question

我在图片中放了一个链接，返回主页;但是，我设置了导航菜单，所以当它悬停在它上面时它们变成红色并且不知何故它在我的图像后面形成一个红色块。我正在使用HTML5和CSS3

HTML5

<header class ="main-header">
        <a href="index.html">
        <img src="Images/image.png" alt="image logo"></a>           

    <nav><ul>
        <li class="active"><a href="index.html">HOME</a></li>
        <li><a href="index/news/news.html">NEWS</a></li>
        <li><a href="index/location/location.html">LOCATION</a></li>
    </ul></nav>     
</header>

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 navigation menu */

.main-header nav {
    background-color: #354175;
    height: 40px;
}

.main-header nav ul {
    list-style: none;
    margin: auto;
}

.main-header nav ul li {
    display: inline;
    float: left;
}

.main-header nav li a:hover, .main-header nav li.active {
    background-color: #C71F0E;
    color: #FFFFFF;
    text-shadow: none;
}

.main-header nav ul li a {
    border-radius: 15px;
    color: #FFFFFF;
    display: block;
    height: 20px;
    padding: 10px 25px;
}

Answer 1

如果您查看a:link, a:visited行，您会发现这会定位所有链接，甚至是您的图片链接。

要废除此功能，请尝试为您的第一个链接提供一个类（如“徽标”），然后在 a:link, a:visited行之后为编写特定样式。

在我的图像链接后面显示红色块

1 个答案: