僅將鼠標懸停在內容上，而不將其懸空激活

Question

我正在嘗試使用flexbox進行導航。 一切都很好，直到我將鼠標懸停在徽標和導航鏈接之間的空間上。 當我這樣做時，它將我的徽標變成設置的懸停狀態顏色。 這就是我想要的，但是我不希望它們之間的空格影響徽標的顏色（懸停時）。 發生這種情況是因為我在徽標上增加了彈性，將導航鏈接推到右側。 我該如何解決？ 我不太熟悉其他方法，例如使用floats和display: block 。 任何建議都會有所幫助。

 /*NAVIGATION-TOP SECTION*/ #nav { display: flex; position: fixed; opacity: .5; z-index: 2; background: lightgrey; padding: 20px 0 20px 0; align-items: baseline; width: 100%; transition: .3s; } #logo { flex-grow: 1; z-index: 2; padding: 0 0 0 50px; font-size: 30px; } #logo:hover { color: #00b0ff } .nav-links { display: flex; float: right; padding: 0 25px 0 0; } .nav-links>a { text-decoration: none; color: black; } .nav-links>a:hover { color: #00b0ff; } .nav-links>a>li { list-style: none; padding: 0 15px 0 15px; } 

 <header> <div id="nav"> <div id="logo">TECHNOLOGY CENTRAL</div> <div class="nav-links"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Services</li> </a> <a href="#"> <li>Contact</li> </a> </div> </div> </header> 

Answer 1

用span包裝徽標，然后將:hover應用於該span可能是您想要的效果。

 /*NAVIGATION-TOP SECTION*/ #nav { display: flex; position: fixed; opacity: .5; z-index: 2; background: lightgrey; padding: 20px 0 20px 0; align-items: baseline; width: 100%; transition: .3s; } #logo { flex-grow: 1; z-index: 2; padding: 0 0 0 50px; font-size: 30px; } #logo span:hover { color: #00b0ff } .nav-links { display: flex; float: right; padding: 0 25px 0 0; } .nav-links>a { text-decoration: none; color: black; } .nav-links>a:hover { color: #00b0ff; } .nav-links>a>li { list-style: none; padding: 0 15px 0 15px; } 

 <header> <div id="nav"> <div id="logo"><div><span>TECHNOLOGY CENTRAL</span></div></div> <div class="nav-links"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Services</li> </a> <a href="#"> <li>Contact</li> </a> </div> </div> </header> 

Answer 2

我已經刪除了徽標的flex-grow ，並向flexbox添加了justify-content 。 CSS中的所有更改都記錄在代碼中。

希望這可以幫助。

 /*NAVIGATION-TOP SECTION*/ #nav { display: flex; position: fixed; opacity: .5; z-index: 2; background: lightgrey; padding: 20px 0 20px 0; align-items: baseline; justify-content: space-between; /* added */ width: 100%; transition: .3s; } #logo { /* flex-grow: 1; removed */ /* z-index: 2; removed */ padding: 0 0 0 50px; font-size: 30px; } #logo:hover { color: #00b0ff } .nav-links { display: flex; /* float: right; removed */ padding: 0 25px 0 0; } .nav-links>a { text-decoration: none; color: black; } .nav-links>a:hover { color: #00b0ff; } .nav-links>a>li { list-style: none; padding: 0 15px 0 15px; } 

 <header> <div id="nav"> <div id="logo">TECHNOLOGY CENTRAL</div> <div class="nav-links"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Services</li> </a> <a href="#"> <li>Contact</li> </a> </div> </div> </header> 

Answer 3

您已將flex-grow: 1應用於徽標項目。 這使其消耗了線路上的所有可用空間。

您還已將懸停規則應用於徽標項目。 這使得整個項目都是可懸停的（包括所有flex-grow空間）。

如果希望僅在內容上方而不是在整個框上激活懸停，則不要使用flex-grow 。

有一個干凈，簡單，容易的解決方案。 請改用flex auto邊距 。

#logo {
  /* flex-grow: 1; REMOVE */
  z-index: 2;
  padding: 0 0 0 50px;
  font-size: 30px;
  margin-right: auto; /* NEW */
}

 #nav { display: flex; position: fixed; opacity: .5; z-index: 2; background: lightgrey; padding: 20px 0 20px 0; align-items: baseline; width: 100%; transition: .3s; } #logo { /* flex-grow: 1; REMOVE */ z-index: 2; padding: 0 0 0 50px; font-size: 30px; margin-right: auto; /* NEW */ cursor: pointer; /* optional */ } #logo:hover { color: #00b0ff } .nav-links { display: flex; padding: 0 25px 0 0; /* margin-left: auto; */ /* instead of margin-right: auto; no difference */ } .nav-links>a { text-decoration: none; color: black; } .nav-links>a:hover { color: #00b0ff; } .nav-links>a>li { list-style: none; padding: 0 15px 0 15px; } 

 <header> <div id="nav"> <div id="logo">TECHNOLOGY CENTRAL</div> <div class="nav-links"> <a href="#"> <li>Home</li> <!-- SEPARATE ISSUE: INVALID HTML: CHECK UL / LI STRUCTURE --> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Services</li> </a> <a href="#"> <li>Contact</li> </a> </div> </div> </header> 

---

在此處了解有關沿主軸對齊的更多信息：

• 在CSS Flexbox中，為什么沒有“ justify-items”和“ justify-self”屬性？

在此處了解有關沿十字軸對齊的更多信息：

• flex-wrap如何與align-self，align-items和align-content一起使用？