懸停在鏈接上時如何確定高度

這不是我的實際代碼。我創建了下拉菜單，但是我遇到了一個問題，所以我刪除了所有的代碼，所以我可以爲我的問題提供最少的代碼。懸停在鏈接上時如何確定高度

我的問題是當我將鼠標懸停在我的鏈接上時，我正在增加錨標記的字體大小，但它也增加了可以理解的li元素的高度。總之我知道它爲什麼會發生，我只是想要解決方案。當我將鼠標懸停在我的元素上時，我想增加字體大小，但不是li元素的大小，它是父元素。如果您不明白問題，請閱讀CSS代碼中的評論。

我只想使用CSS的解決方案

/*basic style no need to pay attention*/ 
 

 
* { 
 
    font-family: helvetica; 
 
    margin: 0px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.menu { 
 
    display: flex; 
 
} 
 

 
.menu li { 
 
    flex: 1; 
 
} 
 

 
ul ul li { 
 
    display: flex; 
 
} 
 

 
.menu>li a { 
 
    background: black; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 

 
/* 
 
    #### 
 
    increase the font size, but not the size for li 
 
    ####*/ 
 

 
a:hover { 
 
    font-size: 26px; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li class="menu-item-has-children"><a href="#">Services</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Plumbing</a></li> 
 
     <li class="menu-item-has-children"><a href="#">Heating</a> 
 
     <ul class="sub-menu sub-menu2"> 
 
      <li><a href="#">Residential</a></li> 
 
      <li><a href="#">Commercial</a></li> 
 
      <li><a href="#">Industrial</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Electrical</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Pricing</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul>

來源

2017-08-09 user2860957

你或許可以嘗試設置'line-height'爲初始字體大小的'px'值（即'a {line-height：14px;}'），或者你可以使用' transform：scale（1.1）;'懸停而不是'font-size'增加。 – zgood

的li高度正在改變，因爲你的默認line-height所做的更改與文本的大小。嘗試爲您的li元素定義line-height，以便它們保持相同的高度。

來源

2017-08-09 18:09:21 hicarrie

/*basic style no need to pay attention*/ 
 

 
* { 
 
    font-family: helvetica; 
 
    margin: 0px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.menu { 
 
    display: flex; 
 
} 
 

 
.menu li { 
 
    flex: 1; 
 
} 
 

 
ul ul li { 
 
    display: flex; 
 
} 
 

 
.menu>li a { 
 
    background: black; 
 
    min-height: 36px; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 

 
/* 
 
    #### 
 
    increase the font size, but not the size for li 
 
    ####*/ 
 

 
a:hover { 
 
    font-size: 26px; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li class="menu-item-has-children"><a href="#">Services</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Plumbing</a></li> 
 
     <li class="menu-item-has-children"><a href="#">Heating</a> 
 
     <ul class="sub-menu sub-menu2"> 
 
      <li><a href="#">Residential</a></li> 
 
      <li><a href="#">Commercial</a></li> 
 
      <li><a href="#">Industrial</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Electrical</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Pricing</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul>

添加最小高度爲「一」的標籤

。菜單>立一個{背景：黑色無重複滾動0 0; min-height：36px; }

來源

2017-08-09 18:21:02

懸停在鏈接上時如何確定高度

回答

相關問題