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

EDIT 申し訳ありませんが、私の質問は十分に明確ではなかったよう。私は全体のスパンをdivに含まれるテキストだけでなくハイライトにしたいと思います。今はテキストのみが強調表示されています。

Answer 1

ディバイダによって問題が発生しています。各リンクを合計幅の3分の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/