将鼠标悬停在链接上时如何修复高度

时间：2017-08-09 17:57:30

标签： html css

这不是我的实际代码。我正在创建下拉菜单，但我遇到了一个问题，所以我删除了所有代码，所以我可以为我的问题提供最少的代码。

我的问题是当我将鼠标悬停在链接上时，我增加了锚标记的字体大小，这很好，但它也增加了V, 7096, 16, 2017/08/09, 17:52:52.016, DPP02\DTAExecutionHost, TestExecutionServiceCommandQueueListener:DispatchAsync I, 7096, 16, 2017/08/09, 17:52:52.017, DPP02\DTAExecutionHost, ExecutionTaskStateModel.ListenerCommandReceived : Requesting a stop on Stop command. I, 7096, 16, 2017/08/09, 17:52:52.017, DPP02\DTAExecutionHost, TestExecutionServiceCommandQueueListener.DispatchAsync : Stop listening on Stop command. I, 7096, 6, 2017/08/09, 17:52:52.017, DPP02\DTAExecutionHost, ExecutionTaskStateModel.RunStateTransitionsAsync : The task was cancelled I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removing agent setting RegisteredAgentIdOnTfs on agent machine I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removing agent setting RegisteredAgentIdOnTfs on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removed agent setting RegisteredAgentIdOnTfs on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removing agent setting RegisteredAgentIdOnTfs on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removed agent setting RegisteredAgentIdOnTfs on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removing agent setting TfsUrl on agent machine I, 7096, 6, 2017/08/09, 17:52:52.022, DPP02\DTAExecutionHost, Removing agent setting TfsUrl on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removed agent setting TfsUrl on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting TfsUrl on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removed agent setting TfsUrl on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting DtlEnvUrl on agent machine I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting DtlEnvUrl on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removed agent setting DtlEnvUrl on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting DtlEnvUrl on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removed agent setting DtlEnvUrl on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting DtlMachineName on agent machine I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removing agent setting DtlMachineName on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.023, DPP02\DTAExecutionHost, Removed agent setting DtlMachineName on agent machine - 32 bit hive I, 7096, 6, 2017/08/09, 17:52:52.024, DPP02\DTAExecutionHost, Removing agent setting DtlMachineName on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.024, DPP02\DTAExecutionHost, Removed agent setting DtlMachineName on agent machine - 64 bit hive I, 7096, 6, 2017/08/09, 17:52:52.024, DPP02\DTAExecutionHost, ExecutionHost.UnregisterFromServer : Agent is unregistering from server. Web method running: [http://tfs01:8080/tfs/XRX%20Projects/_apis/test/Agents/33] (DELETE)33[test] Web method response: [http://tfs01:8080/tfs/XRX%20Projects/_apis/test/Agents/33] (DELETE)33[test] 43 ms I, 312, 1, 2017/08/09, 17:55:23.897, 24814877456, DTAExecutionHost.exe, Main.TryReadAndCacheVssCredentials Acquiring the Token Info I, 312, 1, 2017/08/09, 17:55:23.916, 24814914498, DTAExecutionHost.exe, Communicating to the Token Servicehttp://tfs01:8080/tfs/XRX%20Projects W, 312, 1, 2017/08/09, 17:55:23.998, 24815107475, DTAExecutionHost.exe, Service task failed. Retry attempt 10. I, 2324, 1, 2017/08/09, 17:59:39.692, 467469870, DTAExecutionHost.exe, Main.TryReadAndCacheVssCredentials Acquiring the Token Info I, 2324, 1, 2017/08/09, 17:59:39.723, 467537817, DTAExecutionHost.exe, Communicating to the Token Servicehttp://tfs01:8080/tfs/XRX%20Projects I, 3240, 1, 2017/08/09, 18:02:03.753, 382139782, DTAExecutionHost.exe, Main.TryReadAndCacheVssCredentials Acquiring the Token Info I, 3240, 1, 2017/08/09, 18:02:03.769, 382166680, DTAExecutionHost.exe, Communicating to the Token Servicehttp://tfs01:8080/tfs/XRX%20Projects I, 1288, 1, 2017/08/09, 18:06:12.974, 462638694, DTAExecutionHost.exe, Main.TryReadAndCacheVssCredentials Acquiring the Token Info I, 1288, 1, 2017/08/09, 18:06:12.990, 462666317, DTAExecutionHost.exe, Communicating to the Token Servicehttp://tfs01:8080/tfs/XRX%20Projects I, 3908, 1, 2017/08/09, 18:08:09.827, 238326434, DTAExecutionHost.exe, Main.TryReadAndCacheVssCredentials Acquiring the Token Info 元素的高度，这是可以理解的。总之我知道它为什么会发生， 我只想要解决方案。当我将鼠标悬停在我的元素上时，我想增加字体大小，但不是li元素的大小，这是父元素。如果您不了解问题，请阅读CSS代码中的注释。

  

我只想使用css作为解决方案

＆＃13;
＆＃13; 
li
＆＃13; 
/*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;
}
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

li高度正在变化，因为您的默认line-height会随文字大小而变化。尝试为line-height元素定义li，以便它们保持相同的高度。

答案 1 :(得分：1)

/*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>

将min-height添加到“a”标记

.menu＆gt; li a {background：black none repeat scroll 0 0;最小高度：36px; }

相关问题
最新问题