a：圍繞單詞懸停黑色輪廓

我很難搞清楚我做錯了什麼。當我將鼠標懸停在聯繫人上方時，左側有一個帶有藍色邊框的漂亮灰色背景，但圍繞Contact這個單詞有一個黑色小背景，我不知道如何刪除它。a：圍繞單詞懸停黑色輪廓

ul li:hover { 
background: #c7c3c3; 
border-radius: 5px; 
border-left: 10px solid #16c9ff; 
text-transform: uppercase;

}

<!DOCTYPE html>

<head> 
    <link type="text/css" rel="stylesheet" href="new1.css"/> 
    <title>Sawdust &amp Splinters</title> 
</head> 

<body> 
    <div></div> 
     <div> 
      <ul> 
       <li>Home</li> 
       <li>Photography</li> 
       <li>Woodworking</li> 
       <li>About</li> 
       <li><a href="Contact.html">Contact</a></li> 
      </ul> 
     </div> 
    <div> 
     <img src="front2.jpg"/> 
    </div> 

</body> 

</html>

**** **** CSS

* { 
background-color: black; 
} 
div { 
    max-width: 800px; 
    margin: 0 auto; 
} 
ul { 
    list-style: none; 
} 
ul li { 
    font-family: Maiandra GD; 
    font-size: 20px; 
    color: white; 
    font-weight: bold; 
    float: left; 
    margin-top: 60px; 
    margin-left: 30px; 
    padding: 10px; 

} 

ul li:hover { 
    background: #c7c3c3; 
    border-radius: 5px; 
    border-left: 10px solid #16c9ff; 
    text-transform: uppercase; 
} 

a:link { 
    color: white; 
    text-decoration: none; 
} 

a:visited { 
    text-decoration: none; 
    color: white; 
} 


div img { 
    max-width: 800px; 
    margin-top: 40px; 
    border-radius: 10px; 
} 


#ss { 
    font-family: Maiandra GD; 
    font-size: 4em; 
    text-align: center; 

}

來源

2017-04-20 Queen of the North

可你把HTML也？ –

更新CSS

* { 
    background-color: black; 
} 

div { 
    max-width: 800px; 
    margin: 0 auto; 
} 

ul { 
    list-style: none; 
} 

ul li { 
    font-family: Maiandra GD; 
    font-size: 20px; 
    color: white; 
    font-weight: bold; 
    float: left; 
    margin-top: 60px; 
    margin-left: 30px; 
    padding: 10px; 
    border-left: 10px solid transparent; 
} 

ul li:hover { 
    background: #c7c3c3; 
    border-radius: 5px; 
    border-left: 10px solid #16c9ff; 
} 

ul li:hover .link { 
    background: #c7c3c3; 
    background: #c7c3c3; 
    border-radius: 5px; 
    text-transform: uppercase; 
} 

a:link { 
    color: white; 
    text-decoration: none; 
} 

a:visited { 
    text-decoration: none; 
    color: white; 
} 

div img { 
    max-width: 800px; 
    margin-top: 40px; 
    border-radius: 10px; 
} 

#ss { 
    font-family: Maiandra GD; 
    font-size: 4em; 
    text-align: center; 
}

****** HTML ******

<div></div> 
<div> 
    <ul> 
     <li>Home</li> 
     <li>Photography</li> 
     <li>Woodworking</li> 
     <li>About</li> 
     <li> 
     <a class="link" href="Contact.html">Contact</a> 
     </li> 
    </ul> 
</div> 
<div><img src="front2.jpg"></div>

來源

2017-04-20 02:29:32

a：圍繞單詞懸停黑色輪廓

回答

相關問題