祝你好运，我正在学习网络开发，我想用HTML和CSS创建一个带有导航栏的简单网站。然而，当我把鼠标悬停在导航栏上时，链接会发生变化，这是我不希望的。我仍然希望圆圈边框在悬停时显示，但我不希望项目移动。请参阅下面的代码：
HTML代码：
<!DOCTYPE html>
<html lang="en"> <!--Specifies language and type of characters to use-->
<head>
<meta charset="UTF-8"> <!--Defines metadata about an object-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Specifies name as viewport and content gives the visible area of your webpage on your device-->
<meta name="keyword" content=""> <!--Assist in search engine optimization of your webpage-->
<meta name="description" content=""> <!--Gives your webpage a description-->
<base href=""> <!--Has to do with document root and where the very first webpage of your site is located-->
<title>New Web</title>
<link type="text/css" rel="stylesheet" href="/style.css"> <!--External css styling-->
<style>
</style> <!--Embedded css styling-->
</head>
<body>
<header class="fixed-nav">
<a href="index.html"> <img class="img" src="images/img5.PNG"></a>
<ul class="topmenu">
<li><a class="links" href="home.html">Home</a></li>
<li><a class="links" href="about.html">About Us</a></li>
<li><a class="links" href="contact.html">Contact Us</a></li>
<li><a class="links" href="faq.html">FAQ</a></li>
</ul>
</header>
<div id="wrapper"></div>
</body>
</html>
CSS代码：
*{
margin:0;
padding:0;
border:0;
}
.fixed-nav{
position:fixed;
top:0;
left:0;
display: block;
opacity: 0.6;
z-index: 1000;
background-color: blue !important; /*important clause prevents any other styling from overriding this one*/
width:100%;
height:50px;
}
.img{
width:60px;
height:50px;
top:2px;
/*background:url('images/img6.png') transparent;*/
left:5px;
position:absolute;
display: block;
}
.topmenu{
list-style-type:none;
float:right;
}
.topmenu li{
display:inline-block;
margin-right: 200px;
margin-top: 15px;
}
.links{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-decoration: none;
color:whitesmoke;
font-weight:bold;
}
.links:hover {
color: rgb(7, 66, 7);
/* width:50px;
height:50px; */
border-radius: 50%;
border-style: solid;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 2px rgba(81,203,238,0.5);
box-sizing:content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
/* padding: 14px 16px; */
}
#wrapper{
position:absolute;
width:100%;
height:100vh; /*similar to 100%*/
background-image: url(images/img1.jpg);
background-size: cover;
}
如果能提供任何帮助，我将不胜感激。
代码模拟器：StackBlitz
在代码中，我做了一些CSS样式的更改，同时添加了nav标签而不是header
* {
margin: 0;
padding: 0;
border: 0;
}
.fixed-nav {
/* position: fixed; */
/* top: 0;
left: 0; */
display: block;
opacity: 0.6;
/* z-index: 1000; */
background-color: blue !important;
/*important clause prevents any other styling from overriding this one*/
/* width: 100%; */
height: 50px;
}
.img {
width: 60px;
height: 40px;
border-radius: 50%;
top: 2px;
/*background:url('images/img6.png') transparent;*/
left: 5px;
position: absolute;
/* display: block; */
}
/* .topmenu {
list-style-type: none;
float: right;
} */
.topmenu li {
display: inline-block;
margin-left: 70px;
margin-top: 10px;
}
.links {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-decoration: none;
color: whitesmoke;
font-weight: bold;
}
.links:hover {
color: rgb(209, 212, 209);
width: 50px;
height: 50px;
border-radius: 50%;
border-style: solid;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 2px rgba(81, 203, 238, 0.5);
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
/* padding: 14px 16px; */
}
#wrapper {
position: absolute;
width: 100%;
height: 100vh;
/*similar to 100%*/
background-image: url(images/img1.jpg);
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<!--Specifies language and type of characters to use-->
<head>
<meta charset="UTF-8">
<!--Defines metadata about an object-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Specifies name as viewport and content gives the visible area of your webpage on your device-->
<meta name="keyword" content="">
<!--Assist in search engine optimization of your webpage-->
<meta name="description" content="">
<!--Gives your webpage a description-->
<base href="">
<!--Has to do with document root and where the very first webpage of your site is located-->
<title>New Web</title>
<link type="text/css" rel="stylesheet" href="/style.css">
<!--External css styling-->
<style>
</style>
<!--Embedded css styling-->
</head>
<body>
<header class="fixed-nav">
<a href="index.html">
<img class="img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.hdnicewallpapers.com%2FWalls%2FBig%2FNature%2520and%2520Landscape%2FBeautiful_Sunrising_Nature_Image.jpg&f=1&nofb=1"></a>
<ul class="topmenu">
<li><a class="links" href="home.html">Home</a></li>
<li><a class="links" href="about.html">About Us</a></li>
<li><a class="links" href="contact.html">Contact Us</a></li>
<li><a class="links" href="faq.html">FAQ</a></li>
</ul>
</header>
<div id="wrapper"></div>
</body>
</html>此外，在测试Developer tools时，它是最好的指南，并且很容易从中进行分析。