Question

我的导航栏有悬停效果。但是当我将鼠标悬停在导航栏中的不同元素上时，它会显示文本和背景稍微向上移动并且与导航栏不对齐。

这是一张照片

代码：

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 90%;
    margin: 0 auto;
}


.mainHeader nav {
    width: 100%;
    background-color: #9cb34f;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    
}

.mainHeader nav ul li {
    text-align: center;
    display: inline-block;
    width:23%;
    
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover, 
.mainHeader nav a.Home:link, .mainHeader nav a.Home:visited {
    background-color: #CF5C3F;
    text-shadow: none;
    padding: 10px 120px;
    
}


.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    
}

<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
		<header class="mainHeader">
			<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
			<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li><a class="Home" href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
			
			
			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
		</header>
		
		
        
        <footer class="mainFooter">
  			
    		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
  			
		</footer>
        
    </body>


</html>

抱歉，我必须在这里写一些东西，因为它说我的帖子主要是代码，我需要添加更多信息。

Answer 1

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
  background-size: cover;
  height: 1000px;
  color: #000305;
  font-size: 100%;
  font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #CF5C3F;
}

a:hover,
a:active {
  background-color: #CF5C3F;
  color: #fff;
}

.mainHeader {
  width: 90%;
  margin: 0 auto;
}

.mainHeader nav {
  width: 100%;
  background-color: #9cb34f;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.mainHeader nav ul {
  list-style: none;
}

.mainHeader nav ul li {
  text-align: center;
  display: inline-block;
  width: 23%;
  position: relative;
  top: 8px;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
  padding: 8px 20px;
}

.mainHeader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Couture Anni</title>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="mainHeader">
    <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

    <nav>

      <ul>
        <li><a class="Home" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>

    </nav>


    <p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
  </header>



  <footer class="mainFooter">

    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

  </footer>

</body>


</html>

将悬停背景和字体向下移动

1 个答案: