テキストの幅に制限ホバー

Question

私はhoverを追加したこれらのテキストを持っていますが、境界線（border: 2px solid grey）をボックス全体ではなくテキスト全体に限定したいのですが、どのように可能ですか？

jsFiddle

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
} 
 

 
.eachTitle:hover { 
 
    border: 2px solid grey; 
 
    cursor: pointer; 
 
}

<div class="eachTitle" id="menu">Our Menu</div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;">Gallery</div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;">Where are we?</div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;">About us</div>

Answer 1

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
} 
 

 
.hoverspan:hover { 
 
    border: 2px solid grey; 
 
    cursor: pointer; 
 
}

<div class="eachTitle" id="menu"><span class="hoverspan">Our Menu</span></div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span class="hoverspan">Gallery</span></div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;"><span class="hoverspan">Where are we?</span></div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;"><span class="hoverspan">About us</span></div>

Answer 2

spanの各要素をラップし、その要素に境界線を適用します。

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
    cursor: pointer; 
 
} 
 
.eachTitle span { 
 
    border: 2px solid transparent; 
 
} 
 
.eachTitle:hover span { 
 
    border-color: grey; 
 
}

<div class="eachTitle" id="menu"><span>Our Menu</span> 
 
</div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span>Gallery</span> 
 
</div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;"><span>Where are we?</span> 
 
</div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;"><span>About us</span> 
 
</div>

Answer 3

<div id="menu"><span class="eachTitle">Our Menu</span></div> 

あなたは子要素を作成し、そのためにホバースタイルを設定する必要がjsfiddle