顯示在我的圖片鏈接後面的紅色塊

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行，你會發現，這個目標ALL鏈接，即使你的形象鏈接。

爲了避免這種情況，請嘗試給您的第一個鏈接類（如「徽標」），併爲其編寫線後的具體樣式。