css - 我无法在 CSS 中鼠标悬停时突出显示组件

Question

我想在鼠标悬停在我的 div 上时突出显示。但是当我将它放在跨度中并尝试突出显示跨度时，它会削弱我的布局。

我想制作一个侧边菜单，它会带来一个带有链接选项的面板。我可以让 Javascript 没问题，但 CSS 是个大问题。

这是一个JsFiddle里面有我的代码。

有什么想法吗？

HTML

<div id="main-nav">
  <div class="nav link" value="clientLink">CLIENT</div>
  <div class="nav divider"></div>
  <div class="nav link" value="jobLink">JOB</div>
  <div class="nav divider"></div>
  <div class="nav link" value="employeeLink">MY SPACE</div>
  <span class="stretcher"></span>
</div>

CSS

body {
  background-color: lightgray;
}

#main-nav {
  margin-top: 0px;
  width: 100vh;
  position: fixed;
  height: 10%;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
  top: 0%;
  left: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid black;
  padding: 0px;
  background-color: cornflowerblue;
  background: rgb(0, 98, 184);
  background: -webkit-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* Standard syntax */
  z-index: 100;
}

.nav {
  display: inline-block;
  margin: 0px auto;
  height: 100%;
  float: right;
  margin-right: 10%;
  height: 100%;
  line-height: 45px;
  color: white;
  font-size: 100%;
  font-weight: 900;
}

.stretcher {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.divider {
  background-color: white;
  width: 1px;
  height: 100%;
  box-shadow: 1px 1px 50px white;
}

.menuContent {
  position: absolute;
  margin-left: -100%;
  height: 100%;
  top: 0%;
  bottom: 0%;
  background: black;
  z-index: 99;
}

.nav:hover {
  background-color: blue;
  background: rgb(0, 98, 210);
  background: -webkit-linear-gradient(top, royalblue, lightgray);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, royalblue, lightgray);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, royalblue, lightgray);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(top, royalblue, lightgray);
  /* Standard syntax */
}

编辑抱歉，我的问题不够清楚。我想让整个跨度突出显示，而不仅仅是 div 中包含的文本。现在只有突出显示的文本。

Answer 1

你的问题是因为你的分频器。将每个链接设置为总宽度的三分之一可以获得相同的效果。

.nav.link{
    width: 33%;
    float: left;
    text-align: center;
}

此外，从 .nav 中删除 margin-right:10% 并完全删除担架和分隔线:

<div id="main-nav">
  <div class="nav link" value="clientLink">CLIENT</div>
  <div class="nav link" value="jobLink">JOB</div>
  <div class="nav link" value="employeeLink">MY SPACE</div>
</div>

https://jsfiddle.net/4j451fys/