CSS Flexbox悬停效果无法在固定标题下的水平导航栏中的文本上工作-如何解决问题？

qhhrdooz 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(97)

我想格式一个水平导航栏下面的固定标题我正在制作的网站。我可以这样做，但现在悬停效果不起作用。我的意思是，悬停效果只有当我将光标与导航栏的下边缘对齐时才起作用，在它正上方有一个链接。我希望当我的光标悬停在文本上时，悬停效果起作用。救命啊！谢谢！

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  padding: 0;
}

/* all header stuff*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background-color: #c7c7c7; 
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); 
  z-index: 999; /* Ensure the header is above the other elements */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 210px; /* Adjust width as needed */
  height: auto;
  margin-right: 10px; /* Adjust margin as needed */
}

.title {
  margin-bottom: 5px;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 40px;
}

.subheading {
  font-family: 'Raleway', arial, sans-serif;
  font-size: 24px;
  margin-top: 5px;
}

/*all nav bar stuff*/
nav {
  background-color: #c7c7c7;
  height: 40px;
  margin-top: 120px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 20px;
}

nav li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}

nav li a:hover {
  color: #f45c2c;
  text-decoration: underline;
}

<!DOCTYPE html> 
<html>
    <head>
        <title>Bioreactor</title>
    <link href="Bioreactor.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <header>
      <div class="logo-container">
        <img src="logo.png" alt="Logo" class="logo">
        <div>
          <h1 class="title">PAK BioSolutions Process Design | Home</h1>
          <h3 class = "subheading">Driving Advancements in Biopharmaceutical Manufacturing</h3>
        </div> 
      </div>
    </header>

    <nav>
      <ul>
        <li><a href="Bioreactor.html">Bioreactor</a></li>
        <li><a href="Chromatography.html">Chromatography</a></li>
        <li><a href="Virus Inactivation.html">Virus Inactivation</a></li>
        <li><a href="0.2 Micron Filtration.html">0.2 Micron Filtration</a></li>
        <li><a href="Virus Filtration.html">Virus Filtration</a></li>
      </ul>
    </nav>
</body>
</html>

css

来源：https://stackoverflow.com/questions/76384917/css-flexbox-hover-effect-not-working-on-text-in-horizontal-navigation-bar-under

2条答案

按热度按时间

cngwdvgl1#

试着把元素ul放在nav li a：hover中应该可以

赞(0）回复(0）举报 2023-06-07

xu3bshqb2#

你应该把nav放在header里面

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  padding: 0;
}

/* all header stuff*/
header {
  position: fixed;
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  /* height: 80px; */
  background-color: #c7c7c7; 
  /* padding: 20px; */
  /* display: flex; */
  /* align-items: center; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); 
  z-index: 999; /* Ensure the header is above the other elements */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 210px; /* Adjust width as needed */
  height: auto;
  margin-right: 10px; /* Adjust margin as needed */
}

.title {
  margin-bottom: 5px;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 40px;
}

.subheading {
  font-family: 'Raleway', arial, sans-serif;
  font-size: 24px;
  margin-top: 5px;
}

/*all nav bar stuff*/
nav {
  background-color: #c7c7c7;
  /* height: 40px; */
  /* margin-top: 120px; */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 20px;
}

nav li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}

nav li a:hover {
  color: #f45c2c;
  text-decoration: underline;
}

<header>
  <div class="logo-container">
    <img src="" alt="Logo" class="logo">
    <div>
      <h1 class="title">PAK BioSolutions Process Design | Home</h1>
      <h3 class="subheading">Driving Advancements in Biopharmaceutical Manufacturing</h3>
    </div> 
  </div>

  <nav>
    <ul>
      <li><a href="Bioreactor.html">Bioreactor</a></li>
      <li><a href="Chromatography.html">Chromatography</a></li>
      <li><a href="Virus Inactivation.html">Virus Inactivation</a></li>
      <li><a href="0.2 Micron Filtration.html">0.2 Micron Filtration</a></li>
      <li><a href="Virus Filtration.html">Virus Filtration</a></li>
    </ul>
  </nav>
</header>

赞(0）回复(0）举报 2023-06-07

我来回答

CSS Flexbox悬停效果无法在固定标题下的水平导航栏中的文本上工作-如何解决问题？

2条答案

相关问题

热门标签

最新问答