超鏈接圖像使背景中的紅色框

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這是內部一個div與.logo類的a標籤。這不是你要完成的，因爲你的a標籤本身具有類.logo。

這是你需要的CSS：

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

此查找具有類.logo並具有:hover狀態的a標籤。這將選擇圍繞您的徽標圖像的a，並且您不應再懸停在紅色方框上。